:root {--bg-app:#f0f2f5; --bg-panel:#ffffff; --bg-input:#ffffff; --bg-dropdown:#ffffff; --primary:#2c5282; --text-main:#1a202c; --text-muted:#64748b; --radius:4px; --border:#cbd5e0; --shadow:0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --grad-text:none; --modal-accent:#2c5282; --danger:#dc2626;}
* {box-sizing:border-box;}
body {margin:0; padding:0; font-family:'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background-color:var(--bg-app); color:var(--text-main); min-height:80vh !important; font-size:13px;}
.brand-logo, .nav-logo-img, .account-logo-img, #header-company-logo {filter:none !important; mix-blend-mode:normal !important;}
::-webkit-scrollbar {width:6px; height:6px;}
::-webkit-scrollbar-track {background:rgba(0,0,0,0.05); }
::-webkit-scrollbar-thumb {background:var(--primary); }
::-webkit-scrollbar-thumb:hover {background:#1a202c;}
.table-wrapper::-webkit-scrollbar-track {background:rgba(0,0,0,0.05);}
.table-wrapper::-webkit-scrollbar-thumb {background:rgba(44,82,130,0.5); }
.table-wrapper::-webkit-scrollbar-thumb:hover {background:var(--primary);}
.hidden {display:none !important;}
.visible {display:block !important;}
.animate-fade {animation:fadeIn 0.4s ease-out;}
.animate-slide-up {animation:fadeInUp 0.4s cubic-bezier(0.16,1,0.3,1);}
.animate-scale-in {animation:scaleIn 0.2s ease-out;}
.modal-overlay {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center; z-index:3000;}
.modal-box {background:#ffffff; border:1px solid #cbd5e0; padding:2rem;  width:90%; max-width:400px; text-align:center; box-shadow:0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);}
.modal-box h3 {margin:0 0 15px 0; color:var(--primary); letter-spacing:1px; text-transform:uppercase; border-bottom:1px solid #e2e8f0; padding-bottom:10px; text-shadow:none;}
.modal-box p {background:#f1f5f9; color:#334155; padding:20px; margin-bottom:25px;  border:1px solid #e2e8f0; border-left:4px solid var(--primary); text-align:center; word-break:break-word;}
.modal-actions {display:flex; justify-content:center; gap:15px;}
#create-account-modal .modal-box, #create-account-modal .modal-box h3, #create-account-modal .modal-box p {text-align:left;}
#create-account-modal .modal-actions {gap:15px;}
#create-account-modal .modal-actions .modal-btn {flex:1; padding:12px 0;}
#create-agent-modal .modal-box, #create-agent-modal .modal-box h3, #create-agent-modal .modal-box p, #create-agent-modal .modal-box label {text-align:left;}
#create-agent-modal .modal-actions {gap:15px;}
#create-agent-modal .modal-actions .modal-btn {flex:1; padding:12px 0;}
#create-account-modal .form-group label, #create-agent-modal .form-group label {margin-top:12px; margin-bottom:8px;}
.modal-btn {padding:12px 30px;  cursor:pointer; font-weight:bold; font-size:0.9rem; transition:0.2s; text-transform:uppercase; letter-spacing:1px;}
.btn-solid {background:var(--primary); border:1px solid var(--primary); color:white;}
.btn-solid:hover {background:#1a202c; border-color:#1a202c;}
.btn-ghost {background:transparent; border:1px solid #cbd5e0; color:#64748b;}
.btn-ghost:hover {background:#f1f5f9; color:#000; border-color:#94a3b8;}
#custom-modal {z-index:99999 !important;}
#login-modal {position:fixed; top:0; left:0; width:100%; height:100%; background:var(--bg-app); display:flex; justify-content:center; align-items:center; z-index:2000;}
.login-card {background:var(--bg-panel); padding:3rem;  border:1px solid var(--primary); width:100%; max-width:400px; text-align:center; box-shadow:var(--shadow);}
.brand-header {margin-bottom:2rem;}
.brand-logo-container {margin-bottom:15px;}
.brand-logo {max-width:180px; height:auto; display:inline-block;}
.brand-header span {color:var(--primary); font-size:0.9rem; letter-spacing:4px; display:block; font-weight:bold;}
.pass-input {width:100%; padding:1rem; font-size:1.5rem; text-align:center; background:#ffffff; border:1px solid #cbd5e0; color:var(--text-main);  letter-spacing:8px; margin-bottom:1.5rem; transition:0.2s;}
.pass-input:focus {outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(44,82,130,0.1);}
.btn-login {width:100%; padding:1rem; background:var(--primary); color:white; border:none;  font-weight:bold; cursor:pointer; font-size:1rem; transition:0.2s; letter-spacing:2px;}
.btn-login:hover {background:#1a202c;}
#error-msg {color:var(--danger); margin-top:1rem; font-size:0.9rem; display:none;}
.dashboard-wrapper {width:100%; max-width:1600px; margin:0 auto; padding:20px; min-height:100vh; display:flex; flex-direction:column;}
.top-nav {display:flex; justify-content:space-between; align-items:center; padding:0 0 20px 0; margin-bottom:20px; padding:0 0 10px 0; margin-bottom:15px;}
.nav-logo-img {height:32px; width:auto; max-width:140px; object-fit:contain; display:block;}
.nav-left {display:flex; align-items:center; gap:20px;}
.user-profile {display:flex; align-items:center; gap:10px; background:transparent; padding:6px 15px;  border:none; cursor:pointer; transition:0.2s; width:fit-content; padding:4px 10px;}
.user-profile:hover {box-shadow:none;}
.user-avatar {background:var(--primary); width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; flex-shrink:0;}
.avatar-img {width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0; border:1px solid var(--primary);}
.user-name {font-weight:600; font-size:0.9rem; white-space:nowrap; outline:none; color:var(--text-main);}
.profile-controls {opacity:0; visibility:hidden; transition:all 0.2s ease;}
.user-profile:hover .profile-controls, .user-profile.editing .profile-controls {opacity:1; visibility:visible;}
.icon-btn {background:none; border:none; padding:4px; cursor:pointer; font-size:0.85rem; transition:0.2s;}
.edit-btn {color:var(--text-main);}
.edit-btn:hover {color:var(--primary); transform:scale(1.2);}
.remove-btn {color:var(--danger);}
.remove-btn:hover {color:#dc2626; transform:scale(1.2);}
.nav-right {display:flex; align-items:center; gap:0;}
.session-widget {display:flex; flex-direction:column; align-items:flex-end; border-right:1px solid #cbd5e0; padding-right:15px;}
.session-widget .lbl {font-size:0.65rem; color:var(--text-muted); letter-spacing:1px; font-weight:700;}
.session-widget .val {font-size:1.1rem; font-weight:800; color:#000; line-height:1;}
.btn-logout {background:transparent; color:var(--primary); border:1px solid var(--primary); padding:8px 14px;  cursor:pointer; font-weight:bold; font-size:0.9rem; transition:0.2s;}
.btn-logout:hover {background:var(--danger); border-color:var(--danger); color:white;}
.datetime-display {display:flex; align-items:center; gap:12px; padding:6px 15px; font-family:'Consolas', 'Courier New', monospace; font-size:0.85rem; font-weight:bold; color:var(--text-main); letter-spacing:1px; text-shadow:none;}
.dt-separator {color:var(--primary); font-size:1.1rem; font-weight:300; animation:blinkCursor 1.5s infinite;}
#clock-date {text-transform:uppercase; color:var(--text-muted);}
#clock-time {color:#000; font-weight:900;}
.main-grid {display:flex; flex-direction:column; gap:20px; flex-grow:1;}
.input-card {background:var(--bg-panel); border:1px solid var(--border);  overflow:hidden; display:flex; flex-direction:column; position:relative;}
.input-card:hover {border-color:var(--primary); box-shadow:0 4px 12px rgba(0,0,0,0.05);}
.card-header {padding:15px 20px; display:flex; justify-content:space-between; align-items:center; background:rgba(44,82,130,0.05); border-bottom:1px solid var(--border); animation:glowPulse 4s infinite ease-in-out; transition:background 0.3s;}
.card-header:hover {background:rgba(44,82,130,0.1);}
.card-header h3, .grid-title, .modal-box h3 {margin:0; font-size:1rem; font-weight:900; letter-spacing:1.5px; text-transform:uppercase; color:var(--primary) !important; background:none !important; -webkit-text-fill-color:initial !important; text-shadow:none !important;}
.card-header h3 i {margin-right:8px; animation:iconFloat 3s ease-in-out infinite;}
.card-body {padding:20px; display:flex; flex-direction:column; gap:15px;}
.form-group {display:block; margin-bottom:10px; width:100%; margin-bottom:8px; position:relative; z-index:auto;}
.form-group label {display:block; margin-bottom:4px; font-size:0.65rem; color:var(--primary); font-weight:800; text-transform:uppercase; margin-bottom:2px; font-size:0.6rem;}
.custom-input, .custom-select, .custom-textarea {width:100%; background:#ffffff; border:1px solid #cbd5e0; color:var(--text-main); padding:8px 10px;  font-size:0.85rem; font-family:inherit; padding:5px 8px; font-size:0.8rem; height:auto;}
.custom-textarea {resize:none; min-height:80px; min-height:60px;}
.custom-input:focus, .custom-select:focus, .custom-textarea:focus {outline:none; background:#ffffff; border-color:var(--primary); box-shadow:0 0 0 3px rgba(44,82,130,0.1);}
.btn-submit {background:var(--primary); color:white; border:none; padding:12px;  font-weight:bold; font-size:0.85rem; cursor:pointer; margin-top:5px; width:100%; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:10px; transition:0.2s; letter-spacing:1px;}
.btn-submit:hover {background:#1a202c; transform:translateY(-2px);}
.btn-submit:active {transform:translateY(0);}
.admin-tabs {display:flex; background:#f1f5f9; padding:4px; margin:15px 15px 5px 15px;  border:1px solid #cbd5e0; flex-shrink:0;}
.tab-btn {flex:1; background:transparent; border:none; color:#64748b; padding:6px; font-weight:600; cursor:pointer;  font-size:0.75rem; display:flex; align-items:center; justify-content:center; gap:8px; transition:0.2s;}
.tab-btn:hover {color:var(--primary);}
.tab-btn.active {background:var(--primary); color:white; box-shadow:0 2px 4px rgba(0,0,0,0.1);}
.admin-subview {padding:0 15px 15px 15px;}
.deposit-header-row {display:grid; grid-template-columns:1.5fr 1fr 1fr; opacity:0.7; padding-bottom:5px; border-bottom:1px solid #cbd5e0; letter-spacing:1px; margin-bottom:8px; color:var(--primary); font-size:0.65rem; font-weight:bold; text-transform:uppercase;}
.col-brand {text-align:center;}
.deposit-row {display:grid; grid-template-columns:1.5fr 1fr 1fr; align-items:center; margin-bottom:6px; padding-bottom:6px; border-bottom:1px solid #f1f5f9;}
.gw-label {font-weight:600; font-size:0.8rem; display:flex; gap:8px; align-items:center; color:var(--text-main);}
.gw-label i {color:var(--primary); width:15px;}
.toggle-group {display:flex; gap:4px; justify-content:center;}
.toggle-btn {width:28px; height:28px;  border:1px solid #cbd5e0; background:#ffffff; color:#64748b; cursor:pointer; font-size:0.8rem; display:flex; align-items:center; justify-content:center; transition:0.2s;}
.toggle-btn:hover {border-color:var(--primary); color:var(--primary);}
.toggle-btn.active-done {background-color:#28a745 !important; border-color:#28a745 !important; color:white !important; box-shadow:0 2px 4px rgba(40,167,69,0.2);}
.toggle-btn.active-no {background-color:#dc3545 !important; border-color:#dc3545 !important; color:white !important; box-shadow:0 2px 4px rgba(220,53,69,0.2);}
.log-card {background:var(--bg-panel); border:1px solid var(--border);  display:flex; flex-direction:column; height:calc(100vh - 140px); min-height:500px;}
.table-wrapper {flex-grow:1; overflow-x:auto; overflow-y:auto;}
.data-table {width:100%; border-collapse:collapse; table-layout:fixed;}
.data-table th {background:#e8eef5; color:var(--primary); font-size:0.7rem; font-weight:800; text-transform:uppercase; padding:10px 8px; text-align:left; border-bottom:1px solid #cbd5e0; position:sticky; top:0; z-index:200; padding:6px 8px; font-size:0.65rem;}
.data-table th:last-child {text-align:right;}
.data-table td {padding:4px 8px; border-bottom:1px solid #f1f5f9; vertical-align:middle; font-size:0.75rem; height:35px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:2px 8px; height:28px; font-size:0.7rem;}
.data-table tr:hover td {background:rgba(44,82,130,0.05); color:#000;}
.data-table td:nth-child(1) {color:var(--text-muted); font-size:0.7rem; width:8%;}
.data-table td:nth-child(2) {color:var(--primary); font-family:'Consolas', monospace; font-weight:bold; width:8%;}
.data-table td:nth-child(3) {color:var(--primary); font-weight:800; font-size:0.7rem; text-transform:uppercase; width:12%;}
.data-table td:nth-child(4) {color:var(--text-main); font-weight:600; width:25%; border-right:1px solid rgba(0,0,0,0.05);}
.data-table td:nth-child(5) {color:#64748b; text-align:right; opacity:0.9; width:auto;}
.data-table tr:hover td:nth-child(5) {color:#000; opacity:1;}
.grid-title {margin-top:0; margin-bottom:20px; font-weight:normal; padding-bottom:10px;}
.accounts-wrapper {display:flex; flex-direction:column; gap:30px; padding-bottom:50px;}
.account-logo-wrapper {position:relative; width:40px; height:40px; margin-right:10px; border-radius:6px; cursor:pointer; overflow:hidden; flex-shrink:0;}
.account-logo-img {width:100%; height:100%; object-fit:contain;}
.logo-upload-overlay {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; color:#fff; opacity:0; transition:opacity 0.2s ease;}
.account-logo-wrapper:hover .logo-upload-overlay {opacity:1;}
.account-scroll-track {display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; overflow-x:auto; padding:5px 5px 20px 5px; scroll-behavior:smooth;}
.agent-card-header { border-bottom:1px solid var(--border); padding:8px 12px; display:flex; justify-content:space-between; align-items:center; padding:10px 15px; background:#fff; border-bottom:1px solid var(--border); border-radius:var(--radius) var(--radius) 0 0;}
.agent-card-img {width:60px; height:60px; border-radius:50%; object-fit:cover; border:2px solid var(--primary); background:#fff;}
.agent-info h4 {margin:0 0 5px 0; color:var(--text-main); font-size:1.1rem; font-weight:800; font-size:0.95rem; margin-bottom:2px;}
.agent-info span {font-size:0.7rem; color:var(--text-muted); text-transform:uppercase; font-weight:700; font-size:0.65rem;}
.agent-card-body {flex-grow:1; overflow-y:auto; padding:0;}
.mini-log-item:last-child {border-bottom:none;}
.mini-log-item:hover {background:rgba(44,82,130,0.05); background:#f8fafc;}
.mini-time {color:var(--primary); font-weight:800; font-family:'Consolas', monospace; text-align:left; font-family:'Consolas', monospace; font-weight:700; color:var(--primary); text-align:left; white-space:nowrap;}
.mini-type {font-weight:700; color:var(--text-main); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; font-weight:700; font-size:0.65rem; text-transform:uppercase; color:#334155; background:#f1f5f9; padding:3px 8px;  justify-self:start; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mini-details {color:#64748b; text-align:left !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-left:1px solid #e2e8f0; padding-left:10px; color:#64748b; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-left:2px solid #e2e8f0; padding-left:12px;}
.mini-log-item:hover .mini-details {color:#000; color:#0f172a;}
.add-agent-placeholder:hover {border-color:var(--primary); color:var(--primary); background:#fff; border-color:var(--primary); background:#fff; transform:translateY(-5px); box-shadow:0 10px 25px -5px rgba(0,0,0,0.1);}
.badge {position:relative; display:inline-block; padding:4px 10px; border-radius:4px; font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; background-color:#ebf8ff; color:#2c5282; border:1px solid #bee3f8; box-shadow:none; text-shadow:none;}
.badge:has(:contains("DATA")) {background-color:#fdf2f8; color:#831843; border-color:#fce7f3;}
.badge:has(:contains("MANAGER")) {background-color:#fff7ed; color:#c2410c; border-color:#ffedd5;}
.badge:not(:has(:contains("CSR"))):not(:has(:contains("DATA"))):not(:has(:contains("MANAGER"))) {background-color:#ecfdf5; color:#047857; border-color:#d1fae5;}
.header-actions {display:flex; align-items:center; gap:10px; height:40px;}
.custom-dropdown {position:relative; display:inline-block; font-family:inherit; z-index:100;}
.dropdown-trigger {background:#ffffff; color:var(--primary); border:1px solid #cbd5e0; padding:8px 15px; min-width:auto; white-space:nowrap; display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:0.75rem; font-weight:800;  cursor:pointer; transition:0.2s; box-shadow:0 2px 4px rgba(0,0,0,0.05);}
.dropdown-trigger:hover {background:#f8f9fa; border-color:var(--primary); color:var(--primary);}
.dropdown-menu {position:absolute; top:120%; left:0; min-width:100%; background:#ffffff; border:1px solid #cbd5e0;  box-shadow:0 10px 15px -3px rgba(0,0,0,0.1); max-height:300px; overflow-y:auto; z-index:5000; animation:slideDown 0.2s ease-out; z-index:9999 !important;}
.dropdown-item {padding:10px 15px; font-size:0.7rem; font-weight:bold; cursor:pointer; transition:0.2s; letter-spacing:1px; color:#334155; border-bottom:1px solid #f1f5f9;}
.dropdown-item:last-child {border-bottom:none;}
.dropdown-item:hover {background:var(--primary); color:#fff; padding-left:20px;}
.dropdown-item.active {color:#fff; background:rgba(44,82,130,0.8); border-left:3px solid var(--primary);}
.sleek-select {background-color:#ffffff; color:var(--text-main); border:1px solid #cbd5e0;  padding:5px 10px; font-weight:bold; cursor:pointer; font-size:0.8rem; font-family:'Consolas', monospace;}
.sleek-select option {background-color:#fff; color:#000;}
.btn-header-action {background:transparent; padding:6px 12px;  font-size:0.7rem; font-weight:800; cursor:pointer; transition:0.2s; letter-spacing:1px; display:flex; align-items:center; gap:8px; text-transform:uppercase;}
.btn-add-acc {border:1px dashed var(--primary); color:var(--primary);}
.btn-add-acc:hover {background:rgba(44,82,130,0.1); box-shadow:0 0 10px rgba(0, 0, 0, 0.05);}
.btn-add-user {border:1px solid #28a745; color:#28a745;}
.btn-add-user:hover {background:#28a745; color:white;}
.btn-mini-action {background:transparent; border:1px solid transparent; color:#64748b; width:28px; height:28px;  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:0.2s;}
.btn-mini-action:hover {border-color:#cbd5e0; color:var(--primary); background:#f1f5f9;}
.btn-move-account {background:transparent; border:1px solid #cbd5e0; color:#64748b; cursor:pointer; font-size:0.7rem; padding:4px 8px;  transition:0.2s; display:flex; align-items:center; gap:5px;}
.btn-move-account:hover {border-color:var(--primary); color:var(--primary); background:#f1f5f9;}
.btn-delete-agent {background:transparent; border:none; color:#64748b; width:32px; height:32px;  cursor:pointer; transition:0.2s; display:flex; align-items:center; justify-content:center;}
.btn-delete-agent:hover {color:#dc2626; background:#fee2e2;}
.btn-delete-account {background:transparent; border:none; color:var(--text-muted); cursor:pointer; font-size:0.9rem; padding:5px; margin-left:10px; transition:all 0.2s; opacity:0.5;}
.btn-delete-account:hover {color:#dc2626; opacity:1; transform:scale(1.1);}
.accordion-header {background:#f1f5f9; padding:10px 15px; font-size:0.75rem; font-weight:800; color:var(--primary); text-transform:uppercase; cursor:pointer; border-top:1px solid #cbd5e0; border-bottom:1px solid #cbd5e0; display:flex; justify-content:space-between; align-items:center; transition:0.3s; padding:6px 12px; font-size:0.7rem;}
.accordion-header:hover {background:#e2e8f0; padding-left:20px;}
.accordion-header.active {background:#e2e8f0; border-left:3px solid var(--primary); color:var(--primary);}
.accordion-header i {transition:transform 0.3s ease;}
.accordion-header.active i {transform:rotate(180deg);}
.accordion-body {display:none; background:#fff; box-shadow:inset 0 4px 6px -4px rgba(0,0,0,0.1); padding-bottom:5px;}
.accordion-body.open {display:block;}
.group-header-row {cursor:pointer;}
.group-header-cell {padding:0 !important; border:none !important;}
.group-header-content {background:#f1f5f9; padding:12px 15px; display:flex; justify-content:space-between; align-items:center; font-size:0.75rem; font-weight:800; color:var(--primary); text-transform:uppercase; border-top:1px solid #cbd5e0; border-bottom:1px solid #cbd5e0; transition:0.3s;}
.group-header-row:hover .group-header-content {padding-left:20px; background:#e2e8f0;}
.group-header-row.active .group-header-content {border-left:4px solid var(--primary); background:#e2e8f0;}
.log-row.hidden-row {display:none;}
.clickable-brand {position:relative; cursor:pointer;  padding:5px; transition:all 0.2s;}
.clickable-brand:hover {background:rgba(255,255,255,0.1);}
.brand-edit-overlay {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; color:#fff; opacity:0;  transition:opacity 0.2s;}
.clickable-brand:hover .brand-edit-overlay {opacity:1;}
#quick-period {min-width:auto !important; width:auto !important; padding-right:25px; text-align:center !important;}
.day-filter-wrapper {display:flex; align-items:center; gap:8px; background:#ffffff; padding:4px 10px; border:1px solid var(--border); }
.day-filter-wrapper .filter-label {color:var(--text-muted); font-weight:700;}
.day-filter-wrapper #day-filter-select {border:none !important; background:transparent !important; padding:0; font-size:0.8rem; color:var(--primary); font-weight:800;}
#company-logo-upload, #account-logo-upload, #avatar-upload {display:none !important;}
.action-wrapper {display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:15px; width:100%;}
.btn-cancel-edit, .btn-delete-entry, .btn-submit {flex:1; padding:10px 0;  font-weight:800; font-size:0.7rem; cursor:pointer; text-transform:uppercase; letter-spacing:0.5px; display:flex; align-items:center; justify-content:center; gap:6px; transition:all 0.2s; height:38px; margin:0 !important;}
.btn-cancel-edit {background:#ffffff; border:1px solid #cbd5e0; color:#64748b;}
.btn-cancel-edit:hover {background:#f1f5f9; color:#000; border-color:#94a3b8;}
.btn-delete-entry {background:#ffffff; border:1px solid #ef4444; color:#ef4444;}
.btn-delete-entry:hover {background:#fee2e2; color:#dc2626; border-color:#dc2626;}
.btn-update-mode {background:#d97706 !important; border:1px solid #d97706 !important; color:#fff !important;}
.btn-update-mode:hover {background:#b45309 !important; transform:translateY(-1px);}
.header-actions, .dropdown-trigger, .btn-logout, .theme-btn {height:32px; padding:0 10px; font-size:0.7rem;}
.user-avatar, .avatar-img {width:28px; height:28px;}
.input-card .card-body {padding:15px;}
.account-scroll-track .agent-card, .add-agent-placeholder {min-width:0; width:auto !important; height:500px; background:var(--bg-panel); border:1px solid var(--border);  display:flex; flex-direction:column; flex-shrink:0; margin:0; transition:transform 0.2s, box-shadow 0.2s;}
.mini-log-item {display:grid; grid-template-columns:60px 110px 1fr; gap:15px; align-items:center; padding:8px 15px; border-bottom:1px solid #f1f5f9; font-size:0.75rem; cursor:pointer; transition:background 0.1s;}
#manager-layout {display:flex; width:100%; height:100vh; overflow:hidden; background:var(--bg-app);}
.manager-sidebar {width:clamp(200px, 18vw, 260px); background:#ffffff; border-right:1px solid var(--border); display:flex; flex-direction:column; padding:20px 15px; flex-shrink:0; z-index:100;}
.sidebar-header {text-align:center; margin-bottom:20px;}
.sidebar-brand img {max-width:140px; height:auto; margin-bottom:10px;}
.sidebar-datetime {text-align:center; font-family:'Consolas', monospace; color:var(--text-main);}
#mgr-clock-time {font-size:1.2rem; font-weight:900; color:var(--primary);}
#mgr-clock-date {font-size:0.75rem; color:var(--text-muted); font-weight:bold; text-transform:uppercase;}
.sidebar-profile {display:flex; align-items:center; gap:12px; padding:10px; border-radius:8px; transition:0.2s;}
.mgr-avatar {width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid var(--primary);}
.mgr-avatar-def {width:40px; height:40px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center;}
.mgr-profile-info {display:flex; flex-direction:column; overflow:hidden;}
#mgr-user-display {font-weight:800; font-size:0.85rem; color:var(--text-main); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mgr-profile-info small {font-size:0.5rem; color:var(--text-muted); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; font-weight:700;}
.sidebar-separator {height:1px; background:#f1f5f9; margin:15px 0;}
.sidebar-actions {display:flex; flex-direction:column; gap:8px;}
.btn-sidebar-action {background:#ffffff; border:1px solid #cbd5e0; color:var(--text-main); padding:10px; border-radius:6px; font-weight:700; font-size:0.8rem; text-align:left; cursor:pointer; transition:0.2s; display:flex; align-items:center; gap:10px;}
.btn-sidebar-action i {color:var(--primary); width:20px; text-align:center;}
.btn-sidebar-action:hover {background:var(--primary); color:#fff; border-color:var(--primary);}
.btn-sidebar-action:hover i {color:#fff;}
.sidebar-filters label {font-size:0.65rem; font-weight:800; color:var(--text-muted); text-transform:uppercase; display:block; margin-bottom:5px;}
.sidebar-nav-section {flex-grow:1; overflow-y:auto;}
.sidebar-nav-section label {font-size:0.7rem; font-weight:900; color:var(--primary); letter-spacing:1px; margin-bottom:10px; display:block; border-bottom:1px solid #f1f5f9; padding-bottom:5px;}
.nav-item {padding:8px 12px; margin-bottom:4px; border-radius:6px; cursor:pointer; font-size:0.85rem; font-weight:600; color:#64748b; transition:0.2s; display:flex; justify-content:space-between; align-items:center;}
.nav-item:hover {background:#f1f5f9; color:var(--primary);}
.nav-item.active {background:rgba(44,82,130,0.1); color:var(--primary); font-weight:800;}
.sidebar-footer {padding-top:15px; margin-top:auto; flex-shrink:0;}
.btn-sidebar-logout {width:100%; background:#fee2e2; color:#dc2626; border:none; padding:10px; border-radius:6px; font-weight:800; font-size:0.8rem; cursor:pointer; transition:0.2s;}
.btn-sidebar-logout:hover {background:#dc2626; color:#fff;}
.manager-main {flex-grow:1; display:flex; flex-direction:column; overflow-y:auto; background:#f8f9fa;}
.manager-topbar {background:#ffffff; border-bottom:1px solid var(--border); padding:15px 20px; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:50;}
#active-account-title, #mgr-account-display {margin:0; font-size:1.1rem; color:var(--primary); font-weight:800; text-transform:none !important;}
.mgr-counter {background:#f1f5f9; padding:5px 12px;  font-size:0.75rem; color:var(--text-muted);}
.mgr-counter b {color:var(--primary); font-size:1rem; margin-left:5px;}
.sidebar-filters {position:relative; z-index:200;}
.sidebar-profile-controls {opacity:0; visibility:hidden; transition:all 0.2s ease;}
.sidebar-profile:hover .sidebar-profile-controls, .sidebar-profile.editing .sidebar-profile-controls {opacity:1; visibility:visible;}
#mgr-dd-month {z-index:1000;}
[contenteditable="true"] {outline:none; background:rgba(255,255,255,0.5); cursor:text;}
.profile-controls, .sidebar-profile-controls {min-width:50px; justify-content:flex-end;}
.account-badge-img {height:25px; width:auto; max-width:100px; object-fit:contain; margin-right:-15px; margin-left:-10px;}
.slide-panel {position:fixed; top:0; right:-500px; width:450px; height:100vh; background:#ffffff; box-shadow:-5px 0 25px rgba(0,0,0,0.15); z-index:2000; transition:right 0.3s cubic-bezier(0.16, 1, 0.3, 1); display:flex; flex-direction:column;}
.slide-panel.active {right:0;}
.slide-header {padding:20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; background:#f8f9fa; padding:20px; background:#f8f9fa; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:flex-start; gap:15px;}
.slide-body {flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:30px;}
.chart-card {background:#fff; border:1px solid var(--border); border-radius:12px; padding:15px; box-shadow:0 4px 6px -1px rgba(0,0,0,0.05);}
.chart-header {display:flex; align-items:center; gap:10px; margin-bottom:15px; padding-bottom:10px; border-bottom:1px dashed #e2e8f0;}
.chart-avatar {width:30px; height:30px; border-radius:50%; object-fit:cover;}
.chart-name {font-size:0.85rem; font-weight:800; color:var(--text-main); text-transform:uppercase;}
.account-controls {opacity:0; visibility:hidden; transition:all 0.2s ease;}
.account-header-info:hover .account-controls, .account-header-info.editing .account-controls {opacity:1; visibility:visible;}
#mgr-account-display[contenteditable="true"] {outline:none; border-bottom:2px solid var(--primary) !important; background:rgba(255,255,255,0.5); padding-bottom:2px;}
.mobile-only {display:none;}
.default-avatar {display:flex !important; align-items:center; justify-content:center; background-color:#f1f5f9 !important; color:#94a3b8; font-size:1.2rem;}
.pulse-val {animation:subtlePulse 3s infinite ease-in-out; display:inline-block;}
.count-separator {border-left:2px solid #e2e8f0; padding-left:12px; margin-left:4px; height:24px; display:flex; align-items:center;}
.add-agent-placeholder {min-width:350px; height:500px; background:rgba(255,255,255,0.5); border:2px dashed #cbd5e0;  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; cursor:pointer; transition:all 0.2s ease-in-out; flex-shrink:0; margin:0; position:relative; overflow:hidden;}
.placeholder-content {display:flex; flex-direction:column; align-items:center; gap:15px; padding:20px;}
.add-agent-placeholder .icon-circle {width:80px; height:80px; border-radius:50%; background:#f1f5f9; color:#94a3b8; display:flex; align-items:center; justify-content:center; font-size:2rem; transition:0.3s;}
.add-agent-placeholder:hover .icon-circle {background:var(--primary); color:#fff; transform:scale(1.1);}
.add-agent-placeholder h3 {margin:0; font-size:1.2rem; color:var(--text-main); font-weight:800; text-transform:uppercase; letter-spacing:1px;}
.add-agent-placeholder p {margin:0; font-size:0.85rem; color:var(--text-muted);}
.btn-fake-add {margin-top:10px; padding:8px 20px; border:1px solid var(--primary); border-radius:50px; color:var(--primary); font-size:0.75rem; font-weight:800; text-transform:uppercase; letter-spacing:1px; transition:0.2s;}
.add-agent-placeholder:hover .btn-fake-add {background:var(--primary); color:#fff;}
.sidebar-profile, .sidebar-profile:hover, .sidebar-profile.editing {border:1px solid transparent !important; background:transparent !important; box-shadow:none !important; cursor:default;}
.sidebar-profile .icon-btn {transition:all 0.2s cubic-bezier(0.175,0.885,0.32,1.275); border-radius:50%; padding:6px; width:28px; height:28px; display:flex; align-items:center; justify-content:center;}
.sidebar-profile .icon-btn:hover {background-color:#e2e8f0; color:var(--primary); transform:scale(1.2); box-shadow:0 2px 4px rgba(0,0,0,0.1);}
.custom-dd-wrapper {position:relative; display:inline-block; width:100%; font-family:inherit; z-index:50;}
.custom-dd-trigger {background:#ffffff; border:1px solid #cbd5e0; padding:10px 15px; border-radius:6px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-size:0.85rem; font-weight:700; color:var(--text-main); transition:all 0.2s ease; box-shadow:0 2px 4px rgba(0,0,0,0.02);}
.custom-dd-trigger:hover {border-color:var(--primary); background:#f8fafc; color:var(--primary);}
.custom-dd-trigger i {font-size:0.7rem; color:var(--text-muted); transition:transform 0.3s ease;}
.custom-dd-wrapper.active .custom-dd-trigger i {transform:rotate(180deg); color:var(--primary);}
.custom-dd-options {position:absolute; top:110%; left:0; right:0; background:#ffffff; border:1px solid #e2e8f0; border-radius:8px; box-shadow:0 10px 25px -5px rgba(0,0,0,0.15); max-height:250px; overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(-10px); transition:all 0.2s cubic-bezier(0.16, 1, 0.3, 1); z-index:9999;}
.custom-dd-wrapper.active .custom-dd-options {opacity:1; visibility:visible; transform:translateY(0);}
.custom-dd-option {padding:10px 15px; font-size:0.8rem; font-weight:600; color:#475569; cursor:pointer; border-bottom:1px solid #f1f5f9; transition:all 0.1s; display:flex; align-items:center; gap:8px;}
.custom-dd-option:last-child {border-bottom:none;}
.custom-dd-option:hover {background:#f1f5f9; color:var(--primary); padding-left:20px;}
.custom-dd-option.selected {background:rgba(44,82,130,0.08); color:var(--primary); font-weight:800; border-left:3px solid var(--primary);}
#preview-body {overflow:visible !important; padding-bottom:100px;}
.custom-dd-wrapper.active {z-index:1000 !important;}
.btn-today-pulse {width:auto !important; padding:0 12px !important; gap:8px; font-weight:800 !important; color:var(--primary); background:rgba(44,82,130,0.05); border:1px solid var(--primary) !important; animation:pulseGlow 2s infinite;}
.btn-today-pulse:hover {animation:none; background:var(--primary); color:#fff; transform:translateY(-1px); box-shadow:0 4px 10px rgba(44,82,130,0.3);}
.quick-select-vertical {display:flex; flex-direction:column; gap:8px; width:100%;}
.quick-card {display:flex; align-items:center; background:#ffffff; border:1px solid #cbd5e0; border-radius:6px; padding:10px 15px; cursor:pointer; transition:all 0.1s ease-in-out; user-select:none;}
.quick-card:hover {background:#f8fafc; border-color:var(--primary);}
.quick-card.active {background:var(--primary); border-color:var(--primary); color:#ffffff; box-shadow:0 2px 5px rgba(44,82,130,0.2); font-weight:700;}
.hotkey-hint {display:inline-block; width:24px; font-family:'Consolas', monospace; font-weight:700; font-size:0.8rem; opacity:0.5; border-right:1px solid rgba(0,0,0,0.1); margin-right:10px;}
.quick-card.active .hotkey-hint {opacity:0.8; border-right-color:rgba(255,255,255,0.3);}
.card-label {font-size:0.9rem;}
.deposit-day-counter {display:flex; align-items:center; gap:5px; background:#fff; border:1px solid #cbd5e0; padding:4px 10px; border-radius:20px;}
.deposit-date-inputs {display:flex; flex-direction:column; gap:6px; margin-top:8px; padding:8px 0; border-top:1px dashed #cbd5e0;}
.deposit-date-row {display:flex; align-items:center; gap:8px; font-size:0.75rem;}
.deposit-date-row label {color:var(--primary); font-weight:700; min-width:45px; font-size:0.65rem; text-transform:uppercase;}
.deposit-date-row input[type="date"] {border:1px solid #cbd5e0; padding:3px 6px; font-size:0.75rem; color:var(--text-main); background:#fff; flex:1;}
.counter-control {display:flex; align-items:center; gap:8px; background:#f1f5f9; padding:2px 5px; }
.btn-cnt {background:none; border:none; color:var(--primary); cursor:pointer; font-size:0.7rem; padding:2px 5px; display:flex; align-items:center;}
.btn-cnt:hover {color:#000;}
#dep-days-val {font-weight:800; font-size:0.9rem; color:var(--primary); min-width:15px; text-align:center;}
.split-dd-trigger {display:flex; align-items:stretch; background:#ffffff; border:1px solid #cbd5e0;  transition:all 0.2s; box-shadow:0 2px 4px rgba(0,0,0,0.02); height:38px; overflow:hidden;}
.split-dd-trigger:hover {border-color:var(--primary); box-shadow:0 2px 8px rgba(44,82,130,0.15);}
.dd-text-btn {flex-grow:1; display:flex; align-items:center; justify-content:center; padding:0 15px; font-size:0.75rem; font-weight:800; color:var(--primary); cursor:pointer; border-right:1px solid #f1f5f9; transition:background 0.2s; white-space:nowrap;}
.dd-text-btn:hover {background:#f0f9ff; color:#0c4a6e;}
.dd-arrow-btn {width:30px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-muted); background:#fff; transition:all 0.2s;}
.dd-arrow-btn:hover {background:#f1f5f9; color:var(--primary);}
.custom-dd-wrapper.active .split-dd-trigger {border-color:var(--primary);}
.custom-dd-wrapper.active .dd-arrow-btn i {transform:rotate(180deg); color:var(--primary);}
@keyframes blinkCursor {
0%, 100% {opacity:1;}
50% {opacity:0.3;}
}
@keyframes fadeIn {
from {opacity:0;}
to {opacity:1;}
}
@keyframes fadeInUp {
from {opacity:0; transform:translateY(20px);}
to {opacity:1; transform:translateY(0);}
}
@keyframes glowPulse {
0% {box-shadow:0 0 0 rgba(44,82,130,0); border-bottom-color:rgba(44, 82, 130, 0.1);}
50% {box-shadow:0 2px 8px rgba(44, 82, 130, 0.1); border-bottom-color:rgba(44, 82, 130, 0.3);}
100% {box-shadow:0 0 0 rgba(44,82,130,0); border-bottom-color:rgba(44, 82, 130, 0.1);}
}
@keyframes pulseGlow {
0% {box-shadow:0 0 0 0 rgba(44,82,130,0.7);}
70% {box-shadow:0 0 0 6px rgba(44, 82, 130, 0);}
100% {box-shadow:0 0 0 0 rgba(44, 82, 130, 0);}
}
@keyframes scaleIn {
from {opacity:0; transform:scale(0.95);}
to {opacity:1; transform:scale(1);}
}
@keyframes slideDown {
from {opacity:0; transform:translateY(-10px);}
to {opacity:1; transform:translateY(0);}
}
@keyframes subtlePulse {
0% {transform:scale(1); opacity:1;}
50% {transform:scale(1.1); opacity:0.85;}
100% {transform:scale(1); opacity:1;}
}
@media (max-width: 480px) {
.dashboard-wrapper {padding:10px;}
.top-nav {gap:10px;}
.user-profile {padding:5px 8px; max-width:none;}
.user-name {font-size:0.8rem;}
.session-widget {padding-right:8px;}
.session-widget .lbl {font-size:0.55rem;}
.session-widget .val {font-size:1rem;}
.btn-logout {padding:6px 10px;}
.brand-logo {max-width:120px;}
.account-badge-img {display:none;}
.mini-log-item {display:flex; flex-direction:column; align-items:flex-start; gap:2px; height:auto;}
.mini-time, .mini-type {font-size:0.6rem;}
.mini-details {border-left:none; padding-left:0; white-space:normal; font-size:0.7rem;}
.deposit-header-row {display:none;}
.deposit-row {display:flex; flex-direction:column; align-items:flex-start; gap:5px; border:1px solid var(--border); padding:10px; border-radius:8px;}
.toggle-group {width:100%; justify-content:space-between;}
.toggle-group::before {content:attr(data-brand); text-transform:uppercase; font-weight:bold; font-size:0.7rem;}
}
@media (max-width: 768px) {
#clock-date, .dt-separator {display:none;}
.datetime-display {padding:0; display:none;}
#clock-time {font-size:1rem;}
.agent-grid-container {grid-template-columns:1fr;}
body {font-size:12px; overflow-y:auto !important;}
#manager-layout {flex-direction:column;}
.manager-sidebar {width:100%; height:auto; border-right:none; border-bottom:1px solid var(--border); padding:10px; gap:5px;}
.sidebar-header img {max-width:100px; margin-bottom:0;}
.sidebar-datetime {display:none;}
.sidebar-profile {padding:5px;}
.sidebar-separator {margin:5px 0;}
.sidebar-nav-section {display:none;}
.agent-card, .add-agent-placeholder {min-width:350 !important; width:100% !important; height:auto !important; min-height:400px;}
.mini-log-item {grid-template-columns:50px 80px 1fr; gap:10px;}
.mini-col-head {gap:10px;}
.top-nav {flex-direction:column; gap:10px; align-items:center; text-align:center;}
.nav-left, .nav-right {width:100%; justify-content:center;}
.nav-brand {margin-bottom:5px;}
.main-grid {flex-direction:column;}
.panel-left {width:100% !important; min-width:0 !important; position:static !important; margin-bottom:20px;}
.panel-right {width:100% !important;}
.data-table th, .data-table td {font-size:0.65rem; padding:4px;}
.deposit-header-row, .deposit-row {grid-template-columns:1fr 1fr 1fr; font-size:0.65rem;}
.modal-box {width:95%; padding:15px;}
#role-builder-modal .modal-box > div:nth-child(3) {flex-direction:column; height:auto !important;}
#role-builder-modal .modal-box > div:nth-child(3) > div {height:300px;}
.slide-panel {width:100%; right:-100%;}
.mobile-only {display:block; flex-grow:1; margin:0 10px;}
#mobile-account-select {width:100%; padding:8px 10px; font-size:0.9rem; font-weight:700; color:var(--primary); border:1px solid var(--border); background-color:#f8f9fa; }
.manager-topbar {flex-wrap:wrap; height:auto; gap:0; padding-bottom:12px;}
#mgr-topbar-left {width:100%; flex-wrap:wrap; margin-bottom:10px;}
.manager-topbar > div:last-child {width:100%; justify-content:space-between; border-top:1px dashed var(--border); padding-top:10px;}
.mgr-counter {font-size:0.7rem; padding:4px 10px;}
.day-filter-wrapper {flex-grow:1; justify-content:flex-end;}
#mgr-quick-period {font-size:0.85rem !important;}
.add-agent-placeholder {min-width:350px !important; width:100% !important; height:400px !important;}
}
@media (min-width: 768px) {
.main-grid {flex-direction:row; align-items:flex-start;}
.panel-left {width:380px; min-width:380px; position:sticky; top:20px;}
.panel-right {flex:1; min-width:0;}
}
/* ===== MANAGER MASTER-DETAIL ===== */
.manager-main {display:flex; flex-direction:column; overflow:hidden; background:#f8f9fa;}
.manager-split {display:grid; grid-template-columns:minmax(120px, 16%) minmax(150px, 24%) minmax(0, 1fr); flex:1; min-height:0;}
.mgr-col {min-height:0; overflow-y:auto; border-right:1px solid var(--border); background:#fff;}
.mgr-col-detail {border-right:none; padding:20px 0; display:flex; flex-direction:column; overflow:hidden;}
.mgr-col-label {display:flex; align-items:center; height:38px; padding:0 12px; font-size:0.65rem; font-weight:900; color:var(--primary); letter-spacing:1px; text-transform:uppercase; border-bottom:1px solid #f1f5f9;}
.nav-item, .agent-row {display:flex; justify-content:space-between; align-items:center; height:44px; padding:0 12px; margin:0; border-radius:0; border-bottom:1px solid #f1f5f9; cursor:pointer; color:#64748b; font-size:0.85rem;}
.nav-item:hover, .agent-row:hover {background:#f8fafc;}
.nav-item.active, .agent-row.active {background:#eef2ff; color:var(--primary); font-weight:800; border-right:none; box-shadow:inset 3px 0 0 var(--primary);}
.mgr-col-detail .account-section {flex:1; min-height:0; display:flex; flex-direction:column;}
.mgr-col-detail .account-scroll-track {flex:1; min-height:0; display:flex; flex-direction:column; padding:0; overflow:hidden;}
.mgr-col-detail .agent-card-detail {flex:1; min-height:0; display:flex; flex-direction:column; background:transparent; border:none; box-shadow:none; height:auto;}
.mgr-col-detail .agent-card-detail .agent-card-body {flex:1; min-height:0; overflow-y:auto; padding:0;}
@media (max-width: 768px) {
    .manager-split {grid-template-columns:1fr;}
    .mgr-col {border-right:none; border-bottom:1px solid var(--border);}
    .mgr-col-detail {overflow:visible;}
    .mgr-col-detail .agent-card-detail .agent-card-body {overflow:visible;}
}
.mgr-empty {height:100%; min-height:240px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; color:#94a3b8;}
.mgr-empty i {font-size:1.3rem; color:#cbd5e1; margin-bottom:8px;}
.mgr-empty p {margin:0; font-size:0.8rem; font-weight:700; color:var(--text-main); letter-spacing:0.3px;}
.mgr-empty span {font-size:0.72rem; color:var(--text-muted);}
.mgr-empty b {color:var(--primary); font-weight:800;}
.mgr-empty-sm {padding:16px 12px; font-size:0.72rem; color:#94a3b8;}
.agent-code-chip {display:flex; align-items:center; gap:6px; padding:0; border:none; background:none; font-size:0.7rem; color:#64748b;}
.agent-code-chip > i {color:var(--primary); font-size:0.7rem;}
.agent-code-val {font-family:'Consolas', monospace; font-weight:700; color:var(--text-main); letter-spacing:2px; min-width:36px;}
.agent-code-toggle {background:none; border:none; padding:2px; cursor:pointer; color:#94a3b8; font-size:0.7rem;}
.agent-code-toggle:hover {color:var(--primary);}
.mgr-col-detail .agent-card-detail .agent-card-header {padding:10px 20px !important;}
.mgr-col-detail .agent-card-detail .agent-card-header > div:last-child {gap:14px;}
.mgr-col-detail .agent-card-detail .count-separator {margin-left:0;}
.manager-main {position:relative;}
.agent-back-top {position:absolute; right:28px; bottom:24px; width:40px; height:40px; border-radius:50%; border:1px solid var(--primary); background:#ffffff; color:var(--primary); box-shadow:0 6px 16px rgba(0,0,0,0.12); cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transform:translateY(12px); transition:all 0.25s ease; z-index:60;}
.agent-back-top.show {opacity:1; visibility:visible; transform:translateY(0);}
.agent-back-top:hover {background:var(--primary); color:#ffffff;}
.accordion-sticky {position:sticky; top:0; z-index:5; background:#fff;}
.mini-col-head {display:grid; align-items:end; padding:6px 15px; font-size:0.55rem; font-weight:800; letter-spacing:0.8px; text-transform:uppercase; color:var(--primary); background:#fff; border-bottom:1px solid #f1f5f9;}
.mini-col-head span {min-width:0; padding-right:10px;}
.mini-col-head {gap:15px;}
.report-view .sidebar-actions,
.report-view .sidebar-profile-controls,
.report-view .sidebar-footer,
.report-view .mobile-only,
.report-view .account-controls,
.report-view .btn-delete-account,
.report-view .logo-upload-overlay,
.report-view .agent-code-chip,
.report-view .agent-card-detail .u-padding-8px-15px,
.report-view #mgr-share-btn {display:none !important;}
.report-view .account-logo-wrapper, .report-view .sidebar-brand {pointer-events:none; cursor:default;}
.report-view .sidebar-brand .brand-edit-overlay {display:none;}
.report-view .mgr-empty-hint {display:none !important;}
.mgr-col-agents {display:flex; flex-direction:column;}
#mgr-agent-list {flex:1; min-height:0; display:flex; flex-direction:column;}
#mgr-agent-list > .mgr-empty {flex:1; min-height:0;}
#manager-layout.is-loading {visibility:hidden;}
.mgr-col-accounts .nav-item span, .agent-row span {white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.manager-sidebar {position:relative; transition:width 0.25s ease, padding 0.25s ease;}
.sidebar-tab {position:absolute; bottom:112px; right:-28px; width:28px; height:40px; display:flex; align-items:center; justify-content:center; background:#ffffff; border:none; border-radius:0 8px 8px 0; box-shadow:2px 0 8px rgba(0,0,0,0.06); color:#94a3b8; cursor:pointer; z-index:110; transition:background 0.2s, color 0.2s;}
.sidebar-tab:hover {background:#e2e8f0; color:#1a202c;}
.sidebar-tab i {font-size:0.7rem; transition:transform 0.25s ease;}
#manager-layout.sidebar-collapsed .manager-sidebar {width:0; padding-left:0; padding-right:0; border-right:none;}
#manager-layout.sidebar-collapsed .manager-sidebar > *:not(.sidebar-tab) {display:none;}
#manager-layout.sidebar-collapsed .sidebar-tab i {transform:rotate(180deg);}
@media (max-width: 768px) {
    .sidebar-tab {top:auto; bottom:-28px; right:12px; transform:none; width:56px; height:28px; border-radius:0 0 8px 8px;}
    .sidebar-tab i {transform:rotate(90deg);}
    #manager-layout.sidebar-collapsed .manager-sidebar {width:auto; height:0; padding-top:0; padding-bottom:0; border-bottom:none;}
    #manager-layout.sidebar-collapsed .sidebar-tab i {transform:rotate(-90deg);}
}
.code-input-row {display:flex; align-items:center; gap:8px;}
.code-input-row input {flex:1;}
.gen-code-btn {background:none; border:none; cursor:pointer; color:#94a3b8; font-size:1rem; padding:4px; transition:color 0.2s;}
.gen-code-btn:hover {color:var(--primary);}
.form-split-row {display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start;}
.form-split-row .form-group {min-width:0; margin-bottom:0;}
.form-split-row .custom-textarea {min-height:60px; overflow:hidden;}
@media (max-width: 480px) {
    .form-split-row {grid-template-columns:1fr;}
}
.data-table.dyn-table th:nth-child(1), .data-table.dyn-table th:nth-child(2) {width:70px;}
.data-table.dyn-table td:nth-child(1), .data-table.dyn-table td:nth-child(2) {width:70px; font-size:0.7rem; color:var(--text-muted); font-family:inherit; font-weight:normal;}
.data-table.dyn-table td:nth-child(n+3) {width:auto; color:var(--text-main); font-weight:600; font-size:0.7rem; text-transform:none; border-right:none; white-space:normal; word-break:break-word;}
.data-table.dyn-table td {height:auto; padding:6px 8px; white-space:normal; overflow:visible; text-overflow:clip; line-height:1.4; vertical-align:top;}
.data-table.dyn-table th {text-align:left;}
.mini-log-item.dyn {align-items:start; padding:8px 15px;}
.mini-cell {font-size:0.7rem; font-weight:600; color:var(--text-main); white-space:normal; word-break:break-word; line-height:1.4; padding-right:10px; min-width:0;}
.mini-label {display:block; font-size:0.55rem; font-weight:800; letter-spacing:0.8px; text-transform:uppercase; color:var(--primary); margin-bottom:3px;}
.mini-col-head, .mini-log-item.dyn {justify-items:start; text-align:left;}
.mini-col-head span, .mini-log-item.dyn > span {text-align:left; justify-self:start;}
.accordion-group:has(.accordion-body:not(.open)) .mini-col-head {display:none;}
.data-table.dyn-table th, .data-table.dyn-table td {text-align:left !important;}
.mini-col-head, .mini-log-item.dyn {justify-items:start; text-align:left;}
.mini-col-head span, .mini-log-item.dyn > span {text-align:left; justify-self:start;}
.accordion-group:has(.accordion-body:not(.open)) .mini-col-head {display:none;}
.data-table.dyn-table th, .data-table.dyn-table td {padding-left:8px !important; text-indent:0 !important;}
.nav-count {font-size:0.75rem; font-weight:600; color:#94a3b8; font-variant-numeric:tabular-nums;}
.mgr-col, .agent-card-body, .account-scroll-track, .manager-main {scrollbar-width:thin; scrollbar-color:transparent transparent;}
.mgr-col::-webkit-scrollbar-thumb, .agent-card-body::-webkit-scrollbar-thumb, .account-scroll-track::-webkit-scrollbar-thumb, .manager-main::-webkit-scrollbar-thumb {background:transparent; transition:background 0.3s;}
.mgr-col.is-scrolling, .agent-card-body.is-scrolling, .account-scroll-track.is-scrolling, .manager-main.is-scrolling {scrollbar-color:rgba(44,82,130,0.5) transparent;}
.mgr-col.is-scrolling::-webkit-scrollbar-thumb, .agent-card-body.is-scrolling::-webkit-scrollbar-thumb, .account-scroll-track.is-scrolling::-webkit-scrollbar-thumb, .manager-main.is-scrolling::-webkit-scrollbar-thumb {background:rgba(44,82,130,0.5);}
#manager-loader {position:fixed; inset:0; background:#f0f2f5; display:flex; align-items:center; justify-content:center; z-index:1500;}
#manager-loader i {color:var(--primary); font-size:2rem;}.agent-code-chip > i.fa-key {cursor:pointer;}
.mgr-toast {position:fixed; bottom:24px; left:50%; transform:translate(-50%, 20px); background:#1a202c; color:#fff; padding:10px 18px; border-radius:6px; font-size:0.8rem; font-weight:600; opacity:0; transition:all 0.3s ease; z-index:4000; pointer-events:none;}
.mgr-toast.show {opacity:1; transform:translate(-50%, 0);}
.input-card:has(.custom-dd-wrapper.active) {overflow:visible; z-index:1000;}
.custom-dd-trigger {padding:5px 8px; font-size:0.8rem; height:auto; min-height:0;}