body { background: #f8f9fa; }
.card { box-shadow: 0 6px 18px rgba(0,0,0,0.06); }

/* Billing tweaks */
#itemsTable td .form-control.form-control-sm { min-width: 120px; }
#itemsTable .line-total { text-align: right; font-weight: 600; }
#invTotal { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }

/* Modal/form animations for a trendy feel */
#invoiceModal .modal-content { transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; transform: translateY(8px); opacity: 0; }
#invoiceModal.show .modal-content { transform: translateY(0); opacity: 1; box-shadow: 0 12px 40px rgba(19,24,31,0.12); }
.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label { transform: translateY(-0.6rem) scale(.85); }

/* compact nested items */
.invoice-items .table td, .invoice-items .table th { padding: .35rem .5rem; }

/* Material modal - colorful, modern styles */
.material-modal .modal-header {
	border-bottom: 0;
	padding: 1rem 1.25rem;
	border-top-left-radius: .5rem;
	border-top-right-radius: .5rem;
}
.material-modal .modal-header .modal-title {
	font-weight: 700;
	letter-spacing: -0.2px;
}
.material-modal .modal-header .modal-sub {
	display: block;
	font-size: .9rem;
	opacity: .9;
}
.gradient-accent {
	background: linear-gradient(135deg,#6a11cb 0%,#2575fc 100%);
	color: #fff;
}
.material-modal .modal-content { border-radius: .7rem; overflow: hidden; }
.material-modal .form-label { font-weight: 600; font-size: .9rem; margin-bottom: .25rem; display:block; }
.material-modal .form-control { border-radius: .45rem; }
.btn-accent {
	background: linear-gradient(90deg,#ff8a00,#e52e71);
	color: #fff;
	border: none;
}
.btn-accent:hover{ filter:brightness(.98); }

/* Billing page accents */
.page-accent { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; border-radius:.6rem; color:#fff; margin-bottom:1rem; }
.page-accent h3{ margin:0; font-weight:800; letter-spacing:-0.2px; font-size:1.45rem; }
.page-gradient { background: linear-gradient(135deg,#ff6a88 0%,#7f7fd5 50%,#86a8e7 100%); box-shadow:0 10px 30px rgba(34,34,34,0.08); }

/* Billing items table headers + zebra rows */
.invoice-items .table.table-sm.mb-0 thead th {
	background: #2f3942;
	color: #f7fafc;
	border: 0;
	font-weight: 600;
	padding: .55rem .75rem;
	text-transform: uppercase;
	letter-spacing: .6px;
	font-size: .8rem;
	border-bottom: 2px solid rgba(0,0,0,0.06);
}
.invoice-items .table.table-sm.mb-0 tbody tr:nth-child(odd) {
	background: #ffffff;
}
.invoice-items .table.table-sm.mb-0 tbody tr:nth-child(even) {
	background: #fbfdff;
}
.invoice-items .table.table-sm.mb-0 tbody tr:hover {
	background: #eef3f7;
}
.invoice-items .table.table-sm.mb-0 td, .invoice-items .table.table-sm.mb-0 th { vertical-align: middle; }

/* Animated invoice rows - Trendy Card Style */
.table-trendy th { color: #64748b; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; font-size: 0.85rem; padding-bottom: 0.5rem; border-bottom: 2px solid rgba(0,0,0,0.04) !important; }
.invoice-row { 
    transform: translateY(12px) scale(0.99); 
    opacity:0; 
    transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .3s ease, box-shadow .2s ease; 
}
.invoice-row.show { transform: translateY(0) scale(1); opacity:1; }
.invoice-row.flash { animation: flash .9s; }
@keyframes flash { 0%{ filter: brightness(1.1) } 100%{ filter: brightness(1) } }

/* Trendy card look for rows */
.invoice-row > td { 
    background: #ffffff; 
    padding: 1.25rem 1rem; 
    transition: background 0.25s ease, transform 0.25s ease;
    border-top: 1px solid rgba(0,0,0,0.03);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    position: relative; /* Context for pseudo-elements if needed */
}
/* Stronger styling for start and end borders */
.invoice-row > td:first-child { 
    border-left: 4px solid #6366f1; /* Left colorful accent boundary */
    border-top-left-radius: 12px; 
    border-bottom-left-radius: 12px; 
}
.invoice-row > td:last-child { 
    border-right: 1px solid rgba(0,0,0,0.03); 
    border-top-right-radius: 12px; 
    border-bottom-right-radius: 12px; 
}

/* Alternate pastel borders to make row boundaries distinct */
.invoice-row:nth-child(even) > td:first-child { border-left-color: #ec4899; }
.invoice-row:nth-child(3n) > td:first-child { border-left-color: #10b981; }
.invoice-row:nth-child(4n) > td:first-child { border-left-color: #f59e0b; }

/* Trendy row hover pop */
.invoice-row:hover { box-shadow: 0 14px 28px rgba(17, 24, 39, 0.08); transform: translateY(-3px) scale(1.01); z-index: 10; position: relative; }
.invoice-row:hover > td { background-color: #fcfdff; }

/* Ensure nested invoice-items table follows suit cleanly */
.invoice-items { background: #f8fafc; border-radius: 8px; padding: 4px 6px; box-shadow: inset 0 2px 6px rgba(0,0,0,0.02); margin-top: 0.5rem; }

/* Loading placeholder */
.table-loading td { text-align:center; padding:3.5rem; color:#6c757d; }

/* Modal header gradient for invoice */
#invoiceModal .modal-header { border-bottom:0; }
#invoiceModal .modal-content { border-radius:.7rem; overflow:hidden; }
#invoiceModal .modal-header.gradient { background: linear-gradient(90deg,#6a11cb 0%,#2575fc 100%); color:#fff; }

/* Invoice text accents */
.inv-number { color: #0b5ed7; font-weight:800; }
.inv-customer { color: #13c2c2; font-weight:700; }
.inv-number, .inv-customer { transition: color .18s ease; }
.inv-number:hover { text-decoration: underline; }


/* Ensure modals appear above any backdrop or transformed containers (Navbar is 2300) */
.modal-backdrop { z-index: 3000 !important; }
.modal { z-index: 3001 !important; }
.modal .modal-dialog { z-index: 3002 !important; }

/* Keep navbar above backdrops so navigation remains clickable even if a backdrop lingers */
.navbar { position: relative; z-index: 2300; }
.navbar .navbar-collapse { z-index: 2301; }

/* Modern navbar: sleek, elevated, animated */
.navbar-modern { background: linear-gradient(90deg,#ffffffcc,#f8f9ffcc); border-bottom: 1px solid rgba(18,23,40,0.04); box-shadow: 0 6px 18px rgba(12,18,35,0.04); }
.navbar-modern .navbar-brand { font-weight:800; letter-spacing:-0.6px; font-size:1.15rem; color:#0b1220; display:flex; align-items:center; gap:.6rem }
.navbar-modern .nav-link { color: rgba(15,23,42,0.8); font-weight:600; padding:.6rem .9rem; border-radius:.6rem; position:relative; transition: transform .12s ease, color .12s ease; }
.navbar-modern .nav-link:hover { transform: translateY(-3px); color:#0b5ed7; }
.navbar-modern .nav-link::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 3px; border-radius: 999px; background: linear-gradient(90deg,#6b5bff,#ff6b95); transform: scaleX(0); transform-origin: left center; transition: transform .22s cubic-bezier(.2,.9,.2,1); opacity:0.0; }
.navbar-modern .nav-link:hover::after { transform: scaleX(1); opacity:1; }
.navbar-modern .nav-item .badge { margin-left:.4rem }

/* Trendy animated navbar background */
.navbar-modern {
	background: linear-gradient(90deg,#f8fbff 0%, #ffffff 30%, #fff6fb 60%);
	background-size: 200% 100%;
	animation: navGradient 9s linear infinite;
	border-bottom: none;
	backdrop-filter: blur(6px) saturate(120%);
}
@keyframes navGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* Brand mark */
.navbar-modern .brand-mark { width:12px; height:12px; border-radius:50%; display:inline-block; margin-right:.6rem; box-shadow: 0 8px 26px rgba(107,91,255,0.12); background: linear-gradient(90deg,#6b5bff,#ff6b95); transform-origin:center; animation: brandPulse 2.6s infinite; }
.navbar-modern .brand-text { font-weight:800; letter-spacing:-0.5px; color:#0b1220 }
@keyframes brandPulse { 0%{ transform: scale(1); filter:brightness(1) } 50%{ transform: scale(1.08); filter:brightness(1.05) } 100%{ transform: scale(1); filter:brightness(1) } }

/* Ghost button for logout: thin outline with soft gradient hover */
.btn-ghost { background: transparent; border: 1px solid rgba(11,18,32,0.06); color: #0b1220; padding:.45rem .7rem; border-radius:.55rem; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.btn-ghost:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(11,18,32,0.06); background: linear-gradient(90deg,#ffffffcc,#f1f5ffcc); }

/* Accent sign-in button already exists as .btn-accent; ensure it stands out */
.btn-accent { padding:.5rem .8rem; border-radius:.6rem; font-weight:700; box-shadow: 0 10px 30px rgba(123,97,255,0.08); }

/* Toggler customization */
.navbar-toggler { border: none; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:transparent; }
.navbar-toggler-icon { width:20px; height:14px; display:inline-block; position:relative; }
.navbar-toggler-icon::before, .navbar-toggler-icon::after, .navbar-toggler-icon span { content:''; position:absolute; left:0; right:0; height:2px; background: linear-gradient(90deg,#6b5bff,#ff6b95); border-radius:2px; }
.navbar-toggler-icon::before { top:0; }
.navbar-toggler-icon span { top:6px; }
.navbar-toggler-icon::after { bottom:0; }

/* Nav links: colorful hover pills */
.navbar-modern .nav-link { color: rgba(11,18,32,0.78); }
.navbar-modern .nav-link:hover { color: #6b5bff; background: linear-gradient(90deg, rgba(123,97,255,0.08), rgba(255,107,149,0.04)); }

/* User panel tweaks */
.user-panel .user-name { font-weight:800; }
.user-panel .user-role { color: rgba(11,18,32,0.5); }

/* Responsive spacing */
@media (max-width: 768px) {
	.navbar-modern .navbar-brand { font-size:1rem }
	.user-panel .user-info { display:none }
}

/* subtle indicator for active ajax-loaded link */
.nav-active { box-shadow: inset 0 -3px 0 rgba(11,94,215,0.12); }

/* main content fade when ajax navigating */
#appContent { transition: opacity .26s ease, transform .26s cubic-bezier(.2,.9,.2,1); }
#appContent.ajax-loading { opacity: .4; transform: translateY(6px) scale(.998); }

/* mouseover prefetch hint (tiny pulse) */
.nav-link.prefetching::before { content: ''; position:absolute; right:8px; top:8px; width:8px; height:8px; border-radius:999px; background: linear-gradient(90deg,#ffd166,#ff8c42); box-shadow: 0 6px 16px rgba(255,140,66,0.12); animation: pulse 1.2s infinite; }
@keyframes pulse { 0%{ transform:scale(1); opacity:1 } 70%{ transform:scale(1.6); opacity:.3 } 100%{ transform:scale(1.9); opacity:0 } }

/* Customers page tweaks (overrides) */
.page-gradient { background: linear-gradient(90deg,#fff7fb,#f3f9ff); box-shadow: 0 6px 20px rgba(50,50,93,0.06); }
.page-accent.page-gradient { color: #0f1724; }
.page-accent.page-gradient h3 { color: #0b1220; text-shadow: 0 1px 0 rgba(255,255,255,0.6); }

/* Clickable page header effect */
.page-header-clickable {
  transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 0.2s ease, filter 0.2s ease;
  cursor: pointer;
}
.page-header-clickable:hover {
  transform: translateY(-2px) scale(1.002);
  box-shadow: 0 8px 24px rgba(123, 97, 255, 0.12);
  filter: brightness(1.02);
}
.page-header-clickable:active {
  transform: translateY(0) scale(0.998);
}

/* Trendy Invoice Modal Enhancements */
.invoice-trendy-modal {
  border-radius: 20px;
  overflow: hidden;
  transform: scale(0.96) translateY(20px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.3s ease;
}
.modal.show .invoice-trendy-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.invoice-modal-header {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  padding: 1.75rem 2rem;
  border-bottom: 4px solid #7b61ff;
}
.invoice-modal-header .icon-circle {
  background: linear-gradient(135deg, #7b61ff, #ff6b8a);
  color: #fff;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(255, 107, 138, 0.3);
}
.header-bg-shape {
  position: absolute;
  top: -50%; left: -10%; width: 60%; height: 200%;
  background: radial-gradient(circle, rgba(123,97,255,0.2) 0%, transparent 60%);
  transform: rotate(20deg);
}

.form-control-trendy, .form-select-trendy {
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  background-color: #f8fafc;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.form-control-trendy:focus, .form-select-trendy:focus {
  background-color: #fff;
  border-color: #7b61ff;
  box-shadow: 0 0 0 4px rgba(123, 97, 255, 0.12);
}

.item-add-panel {
  background: linear-gradient(to bottom right, #f8fafc, #f1f5f9);
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  padding: 1.25rem 1.5rem;
  box-shadow: inset 0 2px 4px rgba(255,255,255,1), 0 4px 15px rgba(0,0,0,0.02);
}

.trendy-switch {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.6);
}
.trendy-switch .form-check-input {
  width: 2.8em; 
  height: 1.4em;
  border-color: #cbd5e1;
  background-color: #cbd5e1;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.trendy-switch .form-check-input:checked {
  background-color: #10b981;
  border-color: #10b981;
}

.table-trendy-items thead th {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.8px;
  color: #64748b;
  border-bottom: 2px dashed #e2e8f0;
  background: #f8fafc;
}
.table-trendy-items tbody tr {
  transition: all 0.2s ease;
}
.table-trendy-items tbody tr:hover {
  background-color: #f8fafc;
}

@keyframes shimmerBadge {
  0% { transform: skewX(-20deg) translateX(-150%); }
  20% { transform: skewX(-20deg) translateX(250%); }
  100% { transform: skewX(-20deg) translateX(250%); }
}
.btn-accent{ background: linear-gradient(90deg,#7b61ff,#ff6b8a); color:#fff; border:none }
.btn-accent:hover{ filter:brightness(.98) }
.gradient-accent{ background: linear-gradient(90deg,#7b61ff,#ff6b8a); color:#fff }
.material-modal{ border-radius:10px; overflow:hidden }
.modal-sub{ opacity:.9; font-size:12px }

/* Enlarged dashboard modal tweaks */
.dash-modal-body { padding: 0 !important; display:flex; align-items:center; justify-content:center; }
/* make modal dialog wider so charts can be much larger */
.modal-dialog.modal-xl { max-width: 1500px; }
/* remove card paddings inside modal so chart occupies full width */
.dash-modal-body .card { margin: 0; box-shadow: none; background: transparent; }
.dash-modal-body .card-body { padding: 0; }
.dash-modal-body img, .dash-modal-body canvas { width:100%; height:100%; max-width:none; object-fit:contain; border-radius:6px; box-shadow: 0 18px 46px rgba(11,18,32,0.10); }
.dash-modal-close { background: rgba(255,255,255,0.85); border-radius: 6px; padding: 6px; }

/* Scale-up animation for modal entry */
.animate-scale-up { transform: scale(.98) translateY(6px); opacity: 0; transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .18s ease; }
.modal.show .animate-scale-up { transform: scale(1) translateY(0); opacity: 1; }

/* Allow modal charts to overflow the standard rounded container so full chart is visible */
.dash-modal-content { overflow: visible !important; }
.dash-modal-body { overflow: visible !important; }

/* Services page accents */
.service-pill { display:inline-block; padding:.25rem .6rem; border-radius:999px; background:linear-gradient(90deg,#ffd4a3,#ff8aa1); color:#101018; font-weight:700; }
.table-hover td { vertical-align: middle; }

/* Card styles for services */
.service-card {
	background: linear-gradient(180deg, #ffffff, #fbfbff);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.07);
	transition: transform .18s ease, box-shadow .18s ease;
	padding: 1.15rem;
}
.service-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(15,23,42,0.12); }
.service-icon { width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:24px; background:linear-gradient(90deg,#fff0f6,#f0f9ff); box-shadow: inset 0 -2px 6px rgba(0,0,0,0.02); }
.badge.bg-gradient-primary { background: linear-gradient(90deg,#7b61ff,#ff6b8a); color:#fff; font-weight:700; }
.service-card h5 { margin-bottom:0; font-size:1.2rem; font-weight:700; }
.service-card p { margin-bottom:.5rem; font-size:1rem; }
.service-thumb { width:80px; height:80px; background-size:cover; background-position:center; border-radius:10px; box-shadow: 0 8px 22px rgba(0,0,0,0.06); }
.service-thumb-img { width:80px; height:80px; object-fit:cover; border-radius:10px; box-shadow: 0 8px 22px rgba(0,0,0,0.06); }
.color-dot { display:inline-block; width:18px; height:18px; border-radius:50%; border:2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.08); vertical-align:middle; margin-right:8px; }
.drag-handle { cursor:grab; color:#6c6f77; padding:6px 8px; border-radius:8px; background:transparent }

/* Reports card: equalize label + value sizes and ensure high contrast */
.dash-card[data-href="/reports.php"] .mtd-row .small,
.dash-card[data-href="/reports.php"] .title-row .small {
	font-size: 0.95rem; /* matching label size */
	color: #475569 !important; /* contrast on white */
	font-weight: 600;

}
.dash-card[data-href="/reports.php"] .mtd-row .h6,
.dash-card[data-href="/reports.php"] .amount-row .h5,
.dash-card[data-href="/reports.php"] #dashBillingMtd,
.dash-card[data-href="/reports.php"] #dashNetTotal {
	font-size: 1.35rem; /* unified value size */
	color: #1e3a8a !important; /* dark blue for readability on white */
	font-weight: 800;
	letter-spacing: 0.2px;

}
.dash-card[data-href="/reports.php"] .mtd-row { display:flex; flex-direction:column; align-items:center; }
.dash-card[data-href="/reports.php"] .mtd-row .small { margin-bottom: 6px; }
.drag-handle i { font-size:18px; color: #6c6f77; }

/* Responsive adjustments for tight screens */
@media (max-width: 576px) {
	.service-thumb-img { width:56px; height:56px; }
	.service-card { padding: .75rem; border-radius: 10px; }
	.service-card h5 { font-size:1.05rem; }
	.service-card p { font-size:.95rem; }
	.service-card { box-shadow: 0 6px 18px rgba(15,23,42,0.06); }
}
.dragging { opacity: .5 }
.drag-over { outline: 2px dashed rgba(123,97,255,0.35); transform: scale(.995); }

/* Purchases / Materials cards */
.purchase-card {
	background: linear-gradient(180deg,#ffffff,#fffdf8);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(15,23,42,0.06);
	transition: transform .18s ease, box-shadow .18s ease;
}
.purchase-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(15,23,42,0.12); }
.animate-entry { animation: slideUp .28s ease both; }
@keyframes slideUp { from { transform: translateY(8px); opacity:0 } to { transform: translateY(0); opacity:1 } }

/* Appointments card */
.appt-card { background: linear-gradient(180deg,#ffffff,#f7fbff); border-radius:12px; box-shadow: 0 10px 30px rgba(20,30,60,0.06); overflow:hidden; transition: transform .16s ease, box-shadow .16s ease; }
.appt-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(17,24,39,0.12); }
.appt-card .badge { font-weight:700; padding:.35rem .6rem; border-radius:.5rem }
.appt-card .text-primary { color: #2b7be4 !important; }
.appt-card .card-body { padding:1rem; }
.animate-entry { animation: apptSlide .28s cubic-bezier(.2,.9,.2,1) both; }
@keyframes apptSlide { from { transform: translateY(12px); opacity:0 } to { transform: translateY(0); opacity:1 } }

/* Modern appointment list inside .appt-card */
.appt-list { display:flex; flex-direction:column; gap:10px; }
.appt-item { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px; border-radius:10px; background: linear-gradient(180deg,#ffffff,#fbfdff); box-shadow: 0 6px 18px rgba(15,23,42,0.04); transition: transform .14s ease, box-shadow .14s ease, background .14s ease; }
.appt-item:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(15,23,42,0.08); }
.appt-meta { display:flex; align-items:flex-start; gap:12px; min-width:0; }
.appt-time { color:#6c757d; font-size:.92rem; width:72px; flex-shrink:0; }
.appt-right { display:flex; align-items:center; gap:10px; }
.appt-title { font-weight:700; color:#0b1220; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.appt-sub { color:#6b7280; font-size:.92rem; }
.appt-actions { display:flex; gap:8px; align-items:center; }
.appt-badge { padding:.25rem .5rem; border-radius:.45rem; font-weight:700; font-size:.78rem; color:#fff; }
.appt-badge.scheduled { background:#6c757d; }
.appt-badge.completed { background:#198754; }
.appt-badge.cancelled { background:#dc3545; }
.btn-sm.btn-outline-soft { border:1px solid rgba(11,18,32,0.06); background:transparent; color:#0b1220; }
.btn-sm.btn-accent { background: linear-gradient(90deg,#7b61ff,#ff6b8a); color:#fff; border:none; }
.appt-item .small { margin:0 }

@media (max-width: 768px) {
	.appt-time { width:56px; font-size:.85rem }
	.appt-item { padding:10px }
}

/* Icon and compact mode */
.appt-icon { width:40px; height:40px; flex:0 0 40px; display:flex; align-items:center; justify-content:center; }
.appt-svg { border-radius:50%; display:block }
.appt-list.compact .appt-item { padding:8px 10px; gap:10px; }
.appt-list.compact .appt-title { font-size:0.98rem; }
.appt-list.compact .appt-sub { display:none }
.appt-list.compact .appt-badge { font-size:.72rem; padding:.2rem .45rem }
.appt-list.compact .appt-icon { width:36px; height:36px }

/* transition when toggling compact mode */
.appt-list { transition: all .18s ease; }
.appt-list.compact .appt-item { transform-origin: left center; }

/* Reports page styles */
.reports-card .card-body { padding:1rem; }
.report-table { transition: opacity .18s ease, transform .18s ease; }
.report-table .table th {
	background: #e6f4ff;
	color: #04263a;
	border: 0;
	font-weight:700;
	padding: .6rem .75rem;
	position: relative;
	transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease, background-color .18s ease;
	cursor: pointer;
	user-select: none;
}

/* Sortable headers indicator */
th.sortable { position: relative; }
th.sortable::after { content: '▾'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); opacity: 0.28; font-size: 0.85em; }
th.sorted-asc::after { content: '▴'; opacity: 1; }
th.sorted-desc::after { content: '▾'; opacity: 1; }
.report-table .table th:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(9,30,66,0.08);
}
.report-table .table th.sorted { font-weight:800; color:#021827; transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 36px rgba(9,30,66,0.14); }

/* Animated underline that expands on hover */
.report-table .table th::after {
	content: '';
	position: absolute;
	left: 12%;
	right: 12%;
	bottom: 6px;
	height: 4px;
	width: 0%;
	background: rgba(4,38,58,0.08);
	border-radius: 999px;
	transition: width .2s cubic-bezier(.2,.9,.2,1), background-color .12s ease;
}
.report-table .table th:hover::after { width: 76%; background: rgba(4,38,58,0.12); }

/* Subtle color shift per column on hover to make headers pop individually */
.report-table .table th[data-col] { transition: background-color .18s ease, color .18s ease; }
.report-table .table th[data-col]:hover { filter: brightness(1.06); }
/* Let the invoice-row standard card styles dictate the table row backgrounds */

/* Header text contrast */
.report-table .table th { color: #04263a; }

/* Category badge and employee name styling */
.category-pill { display:inline-block; padding:.25rem .5rem; border-radius:999px; background:#fff3f6; color:#c92a6e; font-weight:700; font-size:.82rem; }
.emp-name { color:#0b5; font-weight:700; }
.amount-cell { text-align:center; font-weight:700; color:#d9480f; }

/* Table frame and subtle borders */
/* Removed old connected report-table borders to use modern trendy separated cards */

/* Pager accent */
.report-pager .btn { background:#1659b6; color:#fff; border:none }
.report-pager .btn:disabled { opacity:.6 }
.report-controls { display:flex; gap:8px; align-items:center; }
.report-pager { display:flex; gap:8px; align-items:center; }
.report-empty { padding:2rem; text-align:center; color:#6c757d }

/* Expenses specific: show total and center result rows */
.report-sum { display:flex; justify-content:flex-end; gap:8px; align-items:center; font-size:0.98rem; color:#04263a; }
.expenses-host .report-table-wrapper { }
.expenses-host .report-table-wrapper table tbody td { text-align: center; }

/* Make label and its value appear closer */
.report-sum .sum-item { display:inline-flex; align-items:center; gap:6px; margin-right:10px }
.report-sum .sum-item strong { font-weight:600 }
.report-sum .sum-val { font-weight:600 }

/* Increase font size by 2px and make bold for report group headers (e.g., "Unpaid Invoices") */
.income-host .d-flex.align-items-center.justify-content-between.mb-2,
.reports-host .d-flex.align-items-center.justify-content-between.mb-2 {
	font-weight: 700;
	font-size: calc(1em + 2px);
}

/* Ensure the small subtotal text remains readable but slightly bolder */
.income-host .group-subtotal small.text-muted,
.reports-host .group-subtotal small.text-muted {
	font-weight: 600;
}

/* Style `.report-sum.mb-2 .sum-item`: light grey base, colorful gradient, shadow and subtle animation */
/* Make the report summary container span full width with a subtle trendy background */
.report-sum.mb-2 {
	width:100%;
	display:flex;
	align-items:center;
	justify-content:flex-start;
	gap:12px;
	padding:10px 14px;
	border-radius:12px;
	background: linear-gradient(90deg, #f8fafc 0%, #eef2ff 50%, #ffffff 100%);
	box-shadow: 0 8px 28px rgba(4,38,58,0.06);
	position:relative;
	overflow:visible;
}

/* subtle animated decorative overlay */
.report-sum.mb-2::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 12px;
	background: linear-gradient(120deg, rgba(123,47,247,0.03), rgba(42,245,152,0.02), rgba(8,174,234,0.02));
	pointer-events: none;
	mix-blend-mode: overlay;
	z-index: 0;
	animation: gradientShift 8s linear infinite;
	background-size: 300% 300%;
}

/* Make individual items visually lightweight so the container is the primary block */
.report-sum.mb-2 .sum-item {
	position:relative;
	z-index:1;
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:6px 10px;
	border-radius:8px;
	background: transparent; /* let container provide background */
	box-shadow: none;
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* Trendy colorful gradient overlay with slow shift */
.report-sum.mb-2 .sum-item .sum-val { -webkit-background-clip: unset; background-clip: unset; color: inherit; }

.report-sum.mb-2 .sum-item::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 8px;
	background: linear-gradient(90deg,#ffffff00 0%, rgba(255,255,255,0.35) 40%, rgba(255,255,255,0.10) 60%, #ffffff00 100%);
	pointer-events:none;
}

@keyframes gradientShift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes pulseShadow {
	0%,100% { box-shadow: 0 6px 18px rgba(4,38,58,0.06); }
	50% { box-shadow: 0 12px 30px rgba(4,38,58,0.09); }
}

.report-sum.mb-2 .sum-item:hover { transform: translateY(-3px); filter:brightness(1.01); }

/* color the amounts for readability per item: Paid (green), Unpaid (orange), Total (blue) */
.report-sum.mb-2 .sum-item:nth-of-type(1) .sum-val { color:#15803d; }
.report-sum.mb-2 .sum-item:nth-of-type(2) .sum-val { color:#b45309; }
.report-sum.mb-2 .sum-item:nth-of-type(3) .sum-val { color:#075985; }

/* Login page modern styles */
.login-card { border-radius: 16px; overflow: hidden; border: 0; box-shadow: 0 22px 60px rgba(11,18,32,0.08); }
.login-illustration { background: linear-gradient(135deg,#6a11cb 0%,#2575fc 100%); min-width: 300px; max-width: 380px; position: relative; }
.login-illustration::after, .login-illustration::before { content: ''; position: absolute; border-radius: 50%; opacity: .12; }
.login-illustration::before { width: 260px; height: 260px; right: -40px; top: -40px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.22), transparent 30%); animation: floaty 8s ease-in-out infinite; }

/* -------------------------------------------
   FullCalendar Trendy, Colorful, Animated Overrides
   ------------------------------------------- */
#calendar.fc {
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 10px 40px rgba(15,23,42,0.06);
	padding: 1.25rem;
	font-family: system-ui, -apple-system, sans-serif;
	border: 1px solid rgba(15,23,42,0.04);
}
/* Toolbar */
.fc .fc-toolbar-title {
	font-weight: 800;
	font-size: 1.45rem;
	letter-spacing: -0.4px;
	background: linear-gradient(90deg, #6b5bff, #ff6b95);
	-webkit-background-clip: text;
	color: transparent;
}
.fc .fc-button-primary {
	background: linear-gradient(90deg,#f8f9fc,#ffffff);
	color: #0b1220;
	border: 1px solid rgba(15,23,42,0.08);
	border-radius: 8px;
	font-weight: 600;
	text-transform: capitalize;
	box-shadow: 0 2px 6px rgba(15,23,42,0.03);
	transition: all 0.2s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
	background: linear-gradient(90deg, #6b5bff, #ff6b95);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 4px 14px rgba(107,91,255,0.25);
	transform: translateY(-1px);
}
.fc .fc-button-primary:hover {
	border-color: rgba(15,23,42,0.15);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(15,23,42,0.06);
}
/* Grid layout and borders */
.fc-theme-standard td, .fc-theme-standard th, .fc-theme-standard .fc-scrollgrid {
	border-color: rgba(15,23,42,0.05);
}
.fc .fc-col-header-cell-cushion {
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: rgba(15,23,42,0.6);
	padding: 0.75rem 0.5rem;
}
/* Day cells */
.fc .fc-daygrid-day-top {
	justify-content: center;
	padding-top: 0.25rem;
}
.fc .fc-daygrid-day-number {
	font-weight: 600;
	font-size: 0.95rem;
	color: #0b1220;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
	text-decoration: none !important;
}
.fc .fc-daygrid-day-number:hover {
	background: rgba(107,91,255,0.1);
	color: #6b5bff;
	transform: scale(1.1);
}
/* Today highlight */
.fc .fc-day-today {
	background: linear-gradient(135deg, rgba(107,91,255,0.03), rgba(255,107,149,0.02)) !important;
}
.fc .fc-day-today .fc-daygrid-day-number {
	background: linear-gradient(135deg, #6b5bff, #ff6b95);
	color: #fff;
	box-shadow: 0 4px 12px rgba(107,91,255,0.25);
}
/* Events */
.fc-direction-ltr .fc-daygrid-event.fc-event-end,
.fc-direction-ltr .fc-daygrid-event.fc-event-start {
	border-radius: 6px;
}
.fc-h-event {
	border: none;
	background: linear-gradient(90deg, rgba(107,91,255,0.12), rgba(107,91,255,0.04));
	box-shadow: 0 2px 4px rgba(107,91,255,0.06);
	margin-bottom: 3px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
	animation: popIn 0.3s ease backwards;
}
.fc-h-event:hover {
	transform: translateY(-2px) scale(1.01);
	box-shadow: 0 6px 16px rgba(107,91,255,0.15);
	filter: brightness(0.95);
	z-index: 5;
}
.fc .fc-event-title {
	font-weight: 700;
	color: #0b1220 !important;
	padding: 0.15rem 0.25rem;
	font-size: 0.85rem;
}
.fc .fc-event-time {
	font-weight: 800;
	color: #0b1220 !important;
	padding: 0.15rem 0 0.15rem 0.25rem;
	font-size: 0.75rem;
}

/* Force event main text to high contrast by default; if providers set custom textColor inline it will still win */
.fc .fc-h-event .fc-event-main { color: #0b1220 !important; text-shadow: none; }

/* Force FullCalendar event text to white for high contrast */
.fc .fc-h-event .fc-event-main, .fc .fc-event-title, .fc .fc-event-time { color: #ffffff !important; }

/* Centered toast styling + pop animation */
.toast-center {
	position: fixed !important;
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%) scale(.96);
	z-index: 3000 !important;
	box-shadow: 0 12px 40px rgba(11,18,32,0.18);
	border-radius: 12px !important;
	min-width: 280px;
	max-width: 92%;
	animation: toastPopIn .32s cubic-bezier(.2,.9,.2,1) both;
}

@keyframes toastPopIn {
	0% { opacity: 0; transform: translate(-50%, -48%) scale(.92); }
	70% { opacity: 1; transform: translate(-50%, -50%) scale(1.02); }
	100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* Add generic pop animation for events */
@keyframes popIn {
	0% { opacity: 0; transform: scale(0.9) translateY(4px); }
	100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* Style "no edit" specific rules lightly */
#calendar.no-edit .fc-h-event:hover {
	transform: none; box-shadow: none; filter: none;
}
.login-illustration::after { width: 160px; height: 160px; left: -30px; bottom: -30px; background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.12), transparent 25%); animation: floaty 10s ease-in-out infinite reverse; }
.login-logo { font-weight: 800; font-size: 1.8rem; letter-spacing: -0.6px; }
.login-title { font-size: 1.25rem; font-weight: 800; opacity: .98 }
.login-sub { opacity: .9; font-size: .95rem }
.login-form { background: #fff; padding: 2.25rem; }
.login-form .form-control { border-radius: .6rem; box-shadow: 0 8px 22px rgba(15,23,42,0.07); transition: transform .14s ease, box-shadow .14s ease, border-color .12s ease; height:54px; padding:.65rem .9rem; font-size:1rem; }
.login-form .form-control:focus { transform: translateY(-3px); box-shadow: 0 20px 56px rgba(15,23,42,0.12); border-color: rgba(99,102,241,0.95); }
.btn-login { background: linear-gradient(90deg,#7b61ff,#ff6b8a); color:#fff; font-weight:800; padding: .85rem 1.05rem; font-size:1rem; border-radius: .9rem; border: none; box-shadow: 0 20px 56px rgba(123,97,255,0.16); transition: transform .14s ease, box-shadow .14s ease; }
.btn-login:hover { transform: translateY(-4px); box-shadow: 0 26px 64px rgba(123,97,255,0.18); }
.login-card .card-body { padding: 0; }

@keyframes floaty { 0%{ transform: translateY(0) } 50%{ transform: translateY(8px) } 100%{ transform: translateY(0) } }

/* Small screens - center layout and show illustration above */
@media (max-width: 767px) {
	.login-illustration { display: flex !important; min-height: 140px; max-width: none; width: 100%; padding: 18px; }
	.login-card .d-flex.flex-column.flex-md-row { flex-direction: column; }
}

/* Subtle focus ring for accessibility */
.form-control:focus { outline: none; box-shadow: 0 0 0 4px rgba(123,97,255,0.08); }

/* login button loading spinner */
.btn-login.loading { pointer-events: none; opacity: .95; }
.btn-login.loading::after {
	content: '';
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px; height: 18px;
	border: 2px solid rgba(255,255,255,0.85);
	border-right-color: transparent;
	border-radius: 50%;
	animation: spin .7s linear infinite;
}
@keyframes spin { 100% { transform: translateY(-50%) rotate(360deg); } }

/* ---- Floating Modern Navbar ---- */
.navbar-floating {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 12px 32px rgba(31, 38, 135, 0.08);
  border-radius: 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
}
.navbar-floating:hover {
  box-shadow: 0 16px 40px rgba(31, 38, 135, 0.12);
  transform: translateY(-2px);
}
.navbar-floating .navbar-brand { font-weight:800; letter-spacing:-0.6px; font-size:1.25rem; color:#0b1220; display:flex; align-items:center; gap:.6rem }
.navbar-floating .nav-link { color: rgba(15,23,42,0.8); font-weight:600; padding:.6rem 1rem; border-radius:1rem; position:relative; transition: all .2s cubic-bezier(.2,.9,.2,1); }
.navbar-floating .nav-link:hover { transform: translateY(-3px); color: #6b5bff; background: rgba(107,91,255,0.06); }
.navbar-floating .nav-link::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 3px; border-radius: 999px; background: linear-gradient(90deg,#6b5bff,#00d2ff); transform: scaleX(0); transform-origin: left center; transition: transform .3s cubic-bezier(.2,.9,.2,1); opacity:0.0; }
.navbar-floating .nav-link:hover::after { transform: scaleX(1); opacity:1; }

.navbar-floating .brand-mark { width:14px; height:14px; border-radius:50%; display:inline-block; margin-right:.4rem; box-shadow: 0 8px 26px rgba(107,91,255,0.4); background: linear-gradient(135deg,#ff6a00,#ee0979); transform-origin:center; animation: brandPulse 2.6s infinite; }

/* ---- Dashboard Stagger Animations ---- */
.stagger-1 { animation: floatUp .6s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: 0.05s; }
.stagger-2 { animation: floatUp .6s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: 0.15s; }
.stagger-3 { animation: floatUp .6s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: 0.25s; }
.stagger-4 { animation: floatUp .6s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: 0.35s; }
.stagger-5 { animation: floatUp .6s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: 0.45s; }

@keyframes floatUp {
  0% { opacity: 0; transform: translateY(30px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Vibrant Dashboard Cards ---- */
.dash-card-vibrant {
  border-radius: 1.25rem;
  border: none;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.dash-card-vibrant::before {
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s ease;
  background: radial-gradient(circle at top right, rgba(255,255,255,0.25), transparent 50%); z-index: -1;
  pointer-events: none;
}
.dash-card-vibrant:hover {
  transform: translateY(-8px) scale(1.02);
  z-index: 10;
}
.dash-card-vibrant:hover::before { opacity: 1; }

.gradient-blue-purple { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; box-shadow: 0 10px 24px rgba(118,75,162,0.25); }
.gradient-blue-purple:hover { box-shadow: 0 18px 36px rgba(118,75,162,0.4); }

.gradient-orange-pink { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%); color: #1a202c; box-shadow: 0 10px 24px rgba(255,154,158,0.25); }
.gradient-orange-pink:hover { box-shadow: 0 18px 36px rgba(255,154,158,0.4); }

.gradient-purple-pink { background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); color: #1a202c; box-shadow: 0 10px 24px rgba(161,140,209,0.25); }
.gradient-purple-pink:hover { box-shadow: 0 18px 36px rgba(161,140,209,0.4); }

.gradient-green-teal { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); color: #1a202c; box-shadow: 0 10px 24px rgba(67,233,123,0.25); }
.gradient-green-teal:hover { box-shadow: 0 18px 36px rgba(67,233,123,0.4); }

.gradient-sunset { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); color: #1a202c; box-shadow: 0 10px 24px rgba(250,112,154,0.25); }
.gradient-sunset:hover { box-shadow: 0 18px 36px rgba(250,112,154,0.4); }

/* Overriding internal text colors for vibrant cards to ensure contrast */
.dash-card-vibrant.gradient-blue-purple .text-muted,
.dash-card-vibrant.gradient-blue-purple .small { color: rgba(255,255,255,0.85) !important; }

.dash-card-vibrant.gradient-orange-pink .text-muted,
.dash-card-vibrant.gradient-orange-pink .small,
.dash-card-vibrant.gradient-purple-pink .text-muted,
.dash-card-vibrant.gradient-purple-pink .small,
.dash-card-vibrant.gradient-green-teal .text-muted,
.dash-card-vibrant.gradient-green-teal .small,
.dash-card-vibrant.gradient-sunset .text-muted,
.dash-card-vibrant.gradient-sunset .small { color: rgba(26,32,44,0.7) !important; }

/* ---- Dashboard Hero Text Animation ---- */
.text-gradient-animated {
  background: linear-gradient(270deg, #ff6b6b, #4facfe, #00f2fe, #fbc2eb);
  background-size: 600% 600%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textGradientFlow 6s ease infinite;
  display: inline-block;
}
@keyframes textGradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
	border-top-color: transparent;
	border-radius: 50%;
	animation: btnSpin .8s linear infinite;
}
@keyframes btnSpin { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(360deg); } }

/* center login wrapper vertically */
.login-wrapper { display:flex; align-items:center; justify-content:center; min-height: calc(100vh - 120px); width:100%; }
.login-logo-img { width:110px; height:110px; display:block; filter: drop-shadow(0 10px 22px rgba(11,18,32,0.08)); }
.login-illustration .login-logo-img { width:120px; height:120px; }
.login-card { width:100%; max-width:1100px; margin:0 auto; display:flex; }
.login-illustration { flex: 0 0 42%; min-width: 260px; max-width: 46%; }
.login-form { flex: 1 1 58%; padding: 3rem; }
/* ensure inputs scale on very wide screens */
.login-form .form-control { max-width: 520px; }

/* animated background blobs and login entrance */
.container { position: relative; }
.bg-blob { position: absolute; pointer-events: none; filter: blur(56px); opacity: .55; transform: translate3d(0,0,0); z-index: 0; mix-blend-mode: screen; }
.bg-blob.a { width:520px; height:520px; background: radial-gradient(circle at 20% 30%, rgba(123,97,255,0.18), transparent 30%), radial-gradient(circle at 70% 70%, rgba(255,107,138,0.10), transparent 40%); top: -100px; left: -120px; animation: blobMove 14s ease-in-out infinite; }
.bg-blob.b { width:420px; height:420px; background: radial-gradient(circle at 30% 30%, rgba(42,245,152,0.12), transparent 30%), radial-gradient(circle at 80% 80%, rgba(8,174,234,0.08), transparent 40%); bottom: -120px; right: -80px; animation: blobMove 18s ease-in-out infinite reverse; opacity: .5 }
@keyframes blobMove { 0%{ transform: translate3d(0,0,0) scale(1);} 50%{ transform: translate3d(20px,-20px,0) scale(1.05);} 100%{ transform: translate3d(0,0,0) scale(1);} }

/* ensure login wrapper sits above blobs */
.login-wrapper { position: relative; z-index: 5; }
.login-card { z-index: 6; transition: transform .6s cubic-bezier(.2,.9,.2,1), box-shadow .45s ease, opacity .5s ease; will-change: transform; }
.login-card.animate { transform: translateY(12px) scale(.985); opacity: 0; }
.login-card.enter { transform: translateY(0) scale(1); opacity:1; }

/* subtle logo float/rotate */
.login-illustration .login-logo-img { animation: logoFloat 6s ease-in-out infinite; }
@keyframes logoFloat { 0%{ transform: translateY(0) rotate(0deg) } 50%{ transform: translateY(-6px) rotate(6deg) } 100%{ transform: translateY(0) rotate(0deg) } }

/* focus underline animation for inputs */
.form-floating .form-control:focus { box-shadow: 0 16px 48px rgba(11,18,32,0.08); }
.form-floating .form-control:focus ~ label { color: rgba(11,18,32,0.85); }





/* make amount values slightly larger and bolder for legibility */
.report-sum.mb-2 .sum-val { font-weight:800; font-size:1.02em; }

/* Center expenses table header text */
.expenses-host .report-table-wrapper table thead th { text-align: center; }

/* Center purchases table header text if desired (kept separate) */
.purchases-host .report-table-wrapper table thead th { text-align: center; }
.purchases-host .report-table-wrapper table tbody td { text-align: center; }

/* Income table: center headers and result rows, and layout group summaries */
.income-host .report-table-wrapper table thead th { text-align: center; }
.income-host .report-table-wrapper table tbody td { text-align: center; }
.income-host .report-sum { justify-content: space-between; }
.income-group > div.mb-2 { padding: .25rem .5rem; background: transparent; }
.income-group strong { color: #0b5ed7; }

/* filter hide animation */
.filter-hidden { transform: scale(.96); opacity:0; height:0 !important; margin:0 !important; padding:0 !important; pointer-events:none; transition: all .22s ease; }

/* status chips */
#statusFilters .btn { border-radius: 999px; padding: .35rem .7rem; }
#statusFiltersWrapper { transition: transform .18s ease, opacity .18s ease; }

/* Confirm modal visual style */
.confirm-modal { background: linear-gradient(135deg,#ff6b6b,#7b61ff); color: #fff; border-radius: .8rem; overflow: hidden; }
.confirm-modal .modal-body { color: #fff; }
.confirm-modal .btn-outline-light { border-color: rgba(255,255,255,0.25); color:#fff }
.confirm-modal .btn-danger { background: #fff; color:#c82333; font-weight:700 }

/* Accent buttons */
.btn-accent { background: linear-gradient(90deg,#ff8a00,#e52e71); color:#fff; border:none }
.btn-accent:hover { filter:brightness(.96) }

/* Expenses card styling */
.card.shadow-sm { transition: transform .14s ease, box-shadow .14s ease; }
.card.shadow-sm:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.badge.bg-secondary { background: linear-gradient(90deg,#6c757d,#495057); }

/* Attendance panel styles (modern, colorful, AJAX-friendly) */
.attendance-panel {
	border-radius: .9rem;
	overflow: hidden;
	background: linear-gradient(180deg,#ffffff,#f4f7ff);
	box-shadow: 0 14px 40px rgba(14,22,45,0.08);
	border: 1px solid rgba(99,102,241,0.06);
	transition: transform .18s ease, box-shadow .18s ease;
}
.attendance-panel:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(14,22,45,0.12); }

/* Dashboard card text contrast improvements */
/* Ensure totals and date/month labels are readable against colorful gradients */
#dashBillingTotal { color: #0b1220; font-weight:700; }
#dashBillingDate { color: rgba(11,18,32,0.65); font-size: calc(.85rem + 5px); font-weight:600; }

/* Dashboard hero */
.dashboard-hero { padding: 28px 0 6px 0; }
.dashboard-hero h1 { font-size: 1.6rem; letter-spacing: -0.4px; }

/* Dashboard cards clickable and animated */
.dash-card { cursor: pointer; transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s ease; will-change: transform, box-shadow; border-radius: .9rem; }
.dash-card:focus { outline: none; box-shadow: 0 12px 40px rgba(99,102,241,0.14); transform: translateY(-6px) scale(1.01); }
.dash-card:hover { transform: translateY(-8px); box-shadow: 0 32px 80px rgba(11,18,32,0.12); }

/* animated accent for totals */
.page-accent { position: relative; overflow: visible; }
.page-accent::after { content: ''; position: absolute; right: -30px; bottom: -30px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 40%); filter: blur(14px); opacity: .9; transform: scale(.9); }

/* make cards' header numbers pop with a simple count animation class (will be used later) */
.pop-n { display:inline-block; transform-origin:center; animation: popIn .6s cubic-bezier(.2,.9,.2,1); }
@keyframes popIn { 0%{ transform: scale(.85); opacity:0 } 60%{ transform: scale(1.06); opacity:1 } 100%{ transform: scale(1); opacity:1 } }

/* Larger dashboard layout tweaks for hero + cards */
.attendance-panel .panel-head h5 { font-size: 1.05rem; }
.page-accent .h4, .page-accent .h5, .page-accent .h3 { font-weight:800 }

/* dashboard charts */
.dash-chart-card { border-radius: 12px; overflow: hidden; }
.donut-chart { display:block; margin-right: 12px; }
.donut-ring { opacity: 1; }
.donut-center .donut-value { font-size: 8px; font-weight:800; fill:#0b1220; }
.donut-center .donut-label { font-size: 6px; fill: rgba(11,18,32,0.6); }
.bar-rows { display:flex; flex-direction:column; gap:10px; }
.bar-row { display:flex; align-items:center; gap:10px; flex-wrap:nowrap; }
.bar-label { width:90px; color: rgba(11,18,32,0.8); font-weight:600; flex: 0 0 auto; }
.bar-track { background: #f1f5ff; border-radius: 999px; height:12px; flex:1 1 auto; overflow:hidden; margin-right:8px; min-width:60px; }
.bar-fill { height:100%; width:0%; border-radius:999px; background: linear-gradient(90deg,#7b61ff,#ff6b8a); transition: width 1.2s cubic-bezier(.2,.9,.2,1); }
.bar-num { min-width:70px; width:auto; text-align:right; font-weight:700; white-space:nowrap; }

.sparkline { display:block; width:100%; height:100%; }
.sparkline-line { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.2s ease, opacity .8s ease; stroke-linecap: round; stroke-linejoin: round; }
.sparkline-fill { opacity:0; transition: opacity 1s ease; }


/* Purchases & Expenses cards use colorful gradients; prefer dark text for clarity */
#dashPurchasesTotal, #dashExpensesTotal { color: #0b1220 !important; font-weight:700; }
#dashPurchMonth, #dashExpMonth { color: rgba(11,18,32,0.72) !important; font-size: calc(.85rem + 5px); font-weight:600; }

/* Small helper: reduce opacity of any small white labels inside page-accent to avoid clash */
.page-accent .small { opacity: 0.95; }

/* Row: make second-row dashboard cards equal height, use full card space, larger text, and animated */
.row.g-3.mt-3 > [class*="col-"], .row.g-3 > [class*="col-"] {
	display: flex;
	align-items: stretch;
}
.row.g-3.mt-3 .card, .row.g-3 .card {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-radius: 14px;
	overflow: hidden;
	transition: transform .36s cubic-bezier(.2,.9,.2,1), box-shadow .36s ease, filter .36s ease;
	will-change: transform;
}
.row.g-3.mt-3 .card .card-body, .row.g-3 .card .card-body { flex: 1 1 auto; display:flex; flex-direction:column; justify-content: center; }
.row.g-3.mt-3 .small, .row.g-3 .small { font-size: 1rem; }
.row.g-3.mt-3 .h4, .row.g-3 .h4 { font-size: 2.4rem; line-height:1; font-weight:800; }
.row.g-3.mt-3 .h5, .row.g-3.mt-3 h5, .row.g-3 .h5, .row.g-3 h5 { font-size: 1.25rem; font-weight:700; }
.row.g-3.mt-3 .card-row.top-row, .row.g-3 .card-row.top-row { font-size: .95rem; }
.row.g-3.mt-3 .card-row.top-row .small, .row.g-3 .card-row.top-row .small { font-size: calc(.95rem + 5px); font-weight:600; }
.row.g-3.mt-3 .card-row.title-row, .row.g-3 .card-row.title-row { font-size: calc(1.05rem + 3px); }
/* Increase the small-title text inside title-row of these cards by +5px */
.row.g-3.mt-3 .card-row.title-row .small, .row.g-3 .card-row.title-row .small { font-size: calc(1.05rem + 8px); font-weight:700; }
.row.g-3.mt-3 .card-row.amount-row .h5, .row.g-3 .card-row.amount-row .h5 { font-size: 1.9rem; }
.row.g-3.mt-3 .card-row.amount-row .h4, .row.g-3 .card-row.amount-row .h4 { font-size: 2.4rem; }
.row.g-3.mt-3 .card .mt-2 { margin-top: .8rem; }
.row.g-3.mt-3 .card .btn { padding: .38rem .6rem; }

/* Animations: slide-in once on load, shimmer glow on hover — no endless scale/float */
@keyframes cardSlideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.row.g-3.mt-3 .card { animation: cardSlideIn 0.5s cubic-bezier(0.2,0.9,0.2,1) both; }
.row.g-3.mt-3 .card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(11,18,32,0.13); }

/* Ensure numbers don't wrap and use space */
.row.g-3.mt-3 .h4, .row.g-3.mt-3 .h5 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Make action buttons subtly glow on hover */
.row.g-3.mt-3 .card .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.08); }

.attendance-panel .panel-head {
	display:flex; align-items:center; justify-content:space-between;
	padding: .95rem 1.1rem;
	background: #0ab6a0;
	color: #fff;
}
.attendance-panel .panel-head h5 { margin:0; font-weight:800; font-size:1.05rem; letter-spacing:-0.2px; }
.attendance-panel .panel-head .muted { opacity:.95; font-weight:600; font-size:.9rem; }
.attendance-panel .card-body { padding: .8rem 1rem; background: transparent; }
.attendance-panel .controls { display:flex; gap:.5rem; align-items:center; }
.attendance-panel .status-chip { display:inline-flex; align-items:center; gap:.5rem; padding:.32rem .6rem; border-radius:999px; font-weight:700; font-size:.85rem; color:#fff; }
.status-present { background: #18b887; box-shadow: inset 0 -2px 8px rgba(0,0,0,0.04); }
.status-absent { background: #ff4d4d; }
.status-late { background: #f0b429; color:#102a43; }
.status-off { background: #6f7dfc; }
/* Group badge styles for attendance grouped header */
.attendance-group-header .status-chip { display:inline-block; padding:.28rem .55rem; border-radius:999px; color:#fff; font-weight:700; font-size:.82rem; box-shadow: 0 6px 18px rgba(11,18,32,0.06); }
.attendance-group-body { overflow: hidden; transition: max-height .28s ease; max-height: 2000px; }
.attendance-group-header.collapsed { opacity: 0.95; }
.attendance-group-header .caret-toggle { background: rgba(255,255,255,0.9); color: #333; border-radius: 6px; padding: 2px 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }

/* Center group header text and style employee name */
.attendance-group-header > div:first-child { flex: 1 1 auto; text-align: center; }
.attendance-group-header { cursor: pointer; }
.attendance-group-header > div:first-child strong { color: #0ab6a0; font-weight:800; }
.attendance-group-header > div:first-child .text-muted { color: rgba(11,18,32,0.55); font-weight:600; }

/* Center-align the right-side badge container inside group headers */
.attendance-group-header > .d-flex.gap-2.align-items-center {
	justify-content: center;
	text-align: center;
}
.attendance-group-header .status-chip,
.attendance-group-header .caret-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* Center all header content in attendance group header */
.attendance-group-header .inner-center { justify-content: center; text-align: center; gap: 12px; }
.attendance-group-header .inner-center > div { display: inline-flex; align-items: center; gap: .5rem; }
.attendance-group-header .inner-center strong { font-size: 1rem; }

/* Expand animation for group body rows */
.attendance-group-body { overflow: hidden; transition: max-height .28s ease, opacity .22s ease; max-height: 0; opacity: 0; }
.attendance-group-body.expanded { opacity: 1; }
.attendance-group-body.expanded tbody tr { animation: fadeSlideDown .28s cubic-bezier(.2,.9,.2,1) both; }
@keyframes fadeSlideDown { from { transform: translateY(-6px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }

.attendance-panel .table { margin-bottom:0; background:transparent; border-radius:.6rem; overflow:hidden; }
.attendance-panel table thead th { background: #047c69; color:#fff; border:0; font-weight:700; padding:.65rem .75rem; text-transform:uppercase; font-size:.75rem; letter-spacing:.6px; }
.attendance-panel table tbody td { padding:.6rem .75rem; vertical-align:middle; border-top:1px solid rgba(15,23,42,0.03); }
.attendance-panel .att-select { min-width:140px; border-radius:.45rem; padding:.35rem .5rem; background: #ffffff; box-shadow: 0 4px 14px rgba(12,18,35,0.04); border:1px solid rgba(99,102,241,0.08); }
.attendance-panel .row-flash { animation: attFlash .9s; }
@keyframes attFlash { 0%{ background:#fff7e6 } 100%{ background:transparent } }
.attendance-panel .empty { text-align:center; padding:2rem; color:#6c757d; }
.attendance-panel .quick-actions .btn { border-radius: .6rem; padding:.45rem .7rem; font-weight:700; }
.attendance-panel .card-footer { padding:.65rem 1rem; background: rgba(10,182,160,0.04); display:flex; justify-content:space-between; align-items:center; gap:.5rem; border-top:1px solid rgba(15,23,42,0.03); }
.attendance-panel .export-link { color:#0b5ed7; font-weight:700; text-decoration:none; }
.attendance-panel .export-link:hover { text-decoration:underline; }
@media (max-width:768px) {
	.attendance-panel .panel-head { flex-direction:column; align-items:flex-start; gap:.5rem }
	.attendance-panel .controls { width:100%; justify-content:space-between }
}

/* Category chips */
.category-chip { background: #ffffff; padding: .45rem .6rem; border-radius: .6rem; box-shadow: 0 6px 16px rgba(15,23,42,0.06); transition: transform .18s ease, opacity .18s ease; }
.category-chip.enter { transform: translateY(0); opacity:1; }
.category-chip { transform: translateY(8px); opacity:0; }
.category-chip .btn { padding: .25rem .45rem; }
.category-chip.exit { transform: translateY(-6px); opacity:0; transition: transform .2s ease, opacity .2s ease; }

/* --- Homepage redesign: colorful, trendy, animated cards --- */
body {
	background: radial-gradient(1200px 600px at 10% 10%, rgba(123,97,255,0.06), transparent 10%),
							radial-gradient(1000px 500px at 90% 90%, rgba(255,107,138,0.04), transparent 12%),
							linear-gradient(180deg,#fbfdff,#f2f8ff 60%);
	min-height: 100vh;
}

.container.py-5 {
	position: relative;
	z-index: 2;
}

/* soft floating for cards on the dashboard */
.card {
	transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s ease, background-color .18s ease;
	will-change: transform;
}
.card:hover {
	transform: translateY(-7px);
	box-shadow: 0 20px 56px rgba(18,24,60,0.11);
}

/* Decorative corner accent for cards */
.card::before {
	content: '';
	position: absolute;
	pointer-events: none;
	width: 120px; height: 120px; border-radius: 20px;
	right: -30px; top: -30px; z-index: 0;
	background: linear-gradient(135deg, rgba(123,97,255,0.14), rgba(255,107,138,0.08));
	transform: rotate(14deg);
}
.card { position: relative; overflow: visible; }

/* Animated counters */
.h4, .h5 { transition: color .18s ease, transform .18s ease; }
.h4.animated-counter, .h5.animated-counter { display: inline-block; transform-origin: center; }
.h4.animated-counter.animate { animation: pop .9s cubic-bezier(.2,.9,.2,1); }
@keyframes pop { 0%{ transform: scale(.88); opacity:0 } 60%{ transform: scale(1.06); opacity:1 } 100%{ transform: scale(1); } }

/* Page-accent cards - richer styling */
.page-accent { border-radius: 12px; padding: .9rem; color:#061826; }
.page-accent.page-gradient { color: #061826; }
.page-accent .h4, .page-accent .h5 { font-weight:800; }

/* Attendance panel - more modern */
.attendance-panel { background: linear-gradient(180deg,#ffffff,#f7fbff); border-radius: 14px; padding: .2rem; }
.attendance-panel .panel-head { padding: 1rem 1.15rem; background: linear-gradient(90deg,#7b61ff 0%, #6bd3ff 100%); color: #fff; border-radius: 10px; box-shadow: 0 8px 30px rgba(107,91,255,0.08); }
.attendance-panel .panel-head h5, .attendance-panel .panel-head .small { color: #fff; }

/* Appointment card: richer controls */
.appt-card { border-radius: 14px; overflow: visible; }
.appt-card .card-body { gap: 1rem; }
.appt-item { transition: transform .22s ease, box-shadow .22s ease, background .18s ease; border-radius: 12px; }
.appt-item:hover { transform: translateY(-6px); box-shadow: 0 18px 46px rgba(11,18,44,0.08); }

/* Dashboard small-stat cards */
.page-accent .small { opacity: .95; }
.page-accent .h4 { letter-spacing: -0.6px; }

/* subtle floating background shapes behind the grid */
.container.py-5::after { content: ''; position: absolute; left: -10%; top: 10%; width: 420px; height: 420px; background: radial-gradient(circle at 30% 30%, rgba(123,97,255,0.06), transparent 30%); border-radius: 50%; z-index:1; pointer-events:none; }

/* Reduce heavy effects on small screens */
@media (max-width: 768px){
	.card:hover { transform: none; box-shadow: 0 8px 26px rgba(11,18,44,0.06); }
	.card::before { display: none; }
	.container.py-5::after { display:none }
}

/* Make action buttons more prominent */
.btn-outline-light { border: 1px solid rgba(255,255,255,0.2); color: #fff; }
.btn-sm.btn-outline-light:hover { transform: translateY(-2px); }

/* Reports tab styling: colorful, animated, trendy */
#reportTabs { display:flex; gap:.5rem; align-items:center; }
#reportTabs .nav-link {
	color: rgba(11,18,32,0.75);
	background: transparent;
	border: 0;
	padding: .6rem .9rem;
	margin-right: .35rem;
	border-radius: .7rem;
	transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .22s ease, background-color .18s ease, color .12s ease;
	position: relative;
	overflow: hidden;
	font-weight:700;
}
#reportTabs .nav-link::after {
	content: '';
	position: absolute;
	left: 12%; right: 12%; bottom: 6px; height: 4px; border-radius: 999px;
	background: linear-gradient(90deg,#7b61ff,#ff6b8a);
	transform: scaleX(0); transform-origin: left center; transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .18s ease;
	opacity: 0;
}
#reportTabs .nav-link:hover {
	transform: translateY(-4px) scale(1.02);
	box-shadow: 0 12px 34px rgba(123,97,255,0.12);
	color: #021827;
	background: linear-gradient(90deg, rgba(123,97,255,0.06), rgba(255,107,138,0.04));
}
#reportTabs .nav-link:hover::after { transform: scaleX(1); opacity: 1; }
#reportTabs .nav-link.active {
	background: linear-gradient(90deg,#7b61ff,#ff6b8a);
	color: #fff;
	box-shadow: 0 16px 44px rgba(123,97,255,0.16);
}
#reportTabs .nav-link.active::after { transform: scaleX(1); opacity: 0.0; }

/* micro animation on focus/keyboard nav */
#reportTabs .nav-link:focus { outline: none; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(11,18,32,0.08); }

@media (max-width: 576px){
  #reportTabs { gap: .3rem; }
  #reportTabs .nav-link { padding: .45rem .6rem; font-size: .92rem; }
}

/* Menu permissions cards (settings) - trendy colorful chips */
.role-perms-card { background: linear-gradient(90deg,#ffffff, #fbfbff); border: 1px solid rgba(4,38,58,0.04); box-shadow: 0 6px 20px rgba(11,38,78,0.04); }
.role-perms-card .role-menu-chip {
	border-radius:10px;
	padding:6px 10px;
	transition: transform .16s ease, box-shadow .18s ease, background-color .18s ease, color .12s ease;
	background: #f3f5f8; /* light professional base */
	color: #0b1220; /* high contrast */
	border: 1px solid rgba(11,18,32,0.04);
	font-weight:700;
}
.role-perms-card .role-menu-chip.btn-primary {
	background: linear-gradient(90deg,#e9f5ff,#d6ecff); /* subtle professional blue */
	color: #04386b; /* dark blue text for readability */
	border-color: transparent;
	box-shadow: 0 10px 28px rgba(4,56,107,0.08);
}
.role-perms-card .role-menu-chip:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(11,38,78,0.06); }
.role-perms-card .role-menu-chip i { opacity: .95; margin-right:6px }

/* gentle animated shimmer on selected chip text (non-distracting) */
.role-perms-card .role-menu-chip.btn-primary .chip-shimmer { display:inline-block; background: linear-gradient(90deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.0) 100%); background-size: 200% 100%; animation: chipShimmer 3.6s linear infinite; -webkit-background-clip: text; }
@keyframes chipShimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* Ensure button text across settings cards is readable */
.role-perms-card .btn { color: #062034 !important; font-weight:700; }

.role-perms-card { display:block; }
.role-perms-card .fw-semibold { font-size: 1rem; font-weight:800; }

/* Financial summary block in Income report */
.financial-summary { background: linear-gradient(180deg,#ffffff,#fbfdff); border:1px solid rgba(11,18,32,0.04); box-shadow: 0 8px 28px rgba(11,18,32,0.04); }
.financial-summary .h6 { font-weight:800; color:#0b1220; }

/* more prominent top summary style */
.financial-summary { padding:12px; border-radius:10px; display:flex; align-items:center; justify-content:space-between; }
.financial-summary > div { min-width:140px; }
.financial-summary small { color: #6b7280; }
.financial-summary .h6 { font-size:1.05rem; }
.financial-summary { background: linear-gradient(90deg,#f7fbff 0%, #ffffff 100%); border: 1px solid rgba(11,18,32,0.06); }



@keyframes megaScaleUp {
  0% { transform: scale(0.6) translateY(50px); opacity: 0; box-shadow: 0 0 0 rgba(0,0,0,0); }
  60% { transform: scale(1.05) translateY(-10px); opacity: 1; }
  100% { transform: scale(1) translateY(0); box-shadow: 0 30px 60px -12px rgba(123, 97, 255, 0.4), 0 18px 36px -18px rgba(255, 107, 138, 0.5); }
}
@keyframes pulseGlow {
  0% { opacity: 0.6; transform: scale(1); filter: hue-rotate(0deg); }
  50% { opacity: 1; transform: scale(1.3); filter: hue-rotate(90deg); }
  100% { opacity: 0.6; transform: scale(1); filter: hue-rotate(0deg); }
}
@keyframes borderDance {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes spinSlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.mega-trendy-modal {
  animation: megaScaleUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 30px 60px -12px rgba(123, 97, 255, 0.4), 0 18px 36px -18px rgba(255, 107, 138, 0.5) !important;
  border-radius: 30px !important;
  overflow: visible !important;
  position: relative;
  z-index: 10;
}
.mega-trendy-modal::before {
  content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; z-index: -1;
  background: linear-gradient(270deg, #ff6b8a, #7b61ff, #00d2ff, #3a7bd5, #ff6b8a);
  background-size: 800% 800%;
  animation: borderDance 6s ease infinite;
  border-radius: 32px;
  opacity: 0.6;
}
.mega-trendy-modal::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1;
  background: inherit; border-radius: 30px;
}
.glow-orb-1, .glow-orb-2, .glow-orb-3 {
  position: absolute; border-radius: 50%; filter: blur(40px); z-index: -2;
  animation: pulseGlow 6s infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95);
  pointer-events: none;
}
.glow-orb-1 { width: 300px; height: 300px; background: rgba(123, 97, 255, 0.6); top: -100px; left: -100px; animation-delay: 0s; }
.glow-orb-2 { width: 400px; height: 400px; background: rgba(255, 107, 138, 0.5); bottom: -150px; right: -50px; animation-delay: 2s; }
.glow-orb-3 { width: 250px; height: 250px; background: rgba(0, 210, 255, 0.5); top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: 4s; }

.fantasy-close-btn {
  background: linear-gradient(135deg, #111, #333) !important;
  border-radius: 50% !important; border: 2px solid rgba(255, 255, 255, 0.2) !important;
  color: white; opacity: 1 !important; width: 46px; height: 46px;
  display: flex !important; justify-content: center; align-items: center;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2), 0 0 15px rgba(255, 107, 138, 0.6);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  background-image: none !important;
}
.fantasy-close-btn i { font-size: 22px; font-weight: normal; transition: transform 0.4s; }
.fantasy-close-btn:hover {
  transform: rotate(180deg) scale(1.15) !important;
  background: linear-gradient(135deg, #ff6b8a, #7b61ff) !important;
  box-shadow: 0 15px 30px rgba(123, 97, 255, 0.5), 0 0 25px rgba(255, 107, 138, 0.9);
  border-color: rgba(255,255,255,0.5) !important;
}


/* -- Users Page Redesign -- */
@keyframes slideInUpFade {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.users-page-header {
  background: linear-gradient(135deg, #1e293b, #0f172a, #334155);
  border-radius: 20px;
  padding: 2.5rem;
  color: #fff;
  box-shadow: 0 20px 40px -15px rgba(15,23,42,0.4);
  position: relative;
  overflow: hidden;
  margin-bottom: 2.5rem;
}
.users-page-header::before {
  content: "";
  position: absolute; width: 400px; height: 400px;
  background: linear-gradient(135deg, #7b61ff, #00d2ff);
  filter: blur(80px); opacity: 0.5;
  border-radius: 50%; top: -150px; right: -100px;
  animation: pulseGlow 8s infinite alternate ease-in-out;
  pointer-events: none;
}
.btn-neon-new {
  background: linear-gradient(90deg, #ff6b8a, #ff9a8b);
  border: none; color: #fff; padding: 0.6rem 1.5rem; font-weight: 700; border-radius: 30px;
  box-shadow: 0 10px 20px rgba(255, 107, 138, 0.4); transition: transform 0.3s, box-shadow 0.3s;
}
.btn-neon-new:hover {
  transform: translateY(-3px) scale(1.05); color: #fff;
  box-shadow: 0 15px 25px rgba(255, 107, 138, 0.6);
}

.user-glass-card {
  background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.4); border-radius: 24px; padding: 1.5rem;
  box-shadow: 0 15px 35px rgba(0,0,0,0.04); transition: all 0.3s ease;
}

/* User Grid Items (replacing table) */
.user-trendy-item {
  background: #ffffff; border-radius: 16px; margin-bottom: 1rem; padding: 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: 0 8px 24px rgba(15,23,42,0.03); border: 1px solid rgba(226,232,240,0.6);
  opacity: 0; animation: slideInUpFade 0.6s forwards cubic-bezier(0.2, 0.8, 0.2, 1);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.user-trendy-item:hover {
  transform: translateY(-5px); box-shadow: 0 18px 40px rgba(15,23,42,0.08); border-color: rgba(123,97,255,0.3);
}

.user-avatar-gradient {
  width: 54px; height: 54px; border-radius: 16px; color: white; display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
.user-info-name { font-size: 1.15rem; font-weight: 700; color: #0f172a; margin-bottom: 0.15rem; }
.user-info-email { font-size: 0.85rem; color: #64748b; }

.badge-role { padding: 0.4rem 0.8rem; border-radius: 20px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.role-admin { background: rgba(123,97,255,0.1); color: #7b61ff; }
.role-manager { background: rgba(0,210,255,0.1); color: #00a4d6; }
.role-staff { background: rgba(255,107,138,0.1); color: #e6395b; }
.role-employee { background: rgba(42,217,152,0.1); color: #1f9d6e; }

.btn-magic-edit { background: #f1f5f9; color: #475569; border: none; border-radius: 10px; width: 40px; height: 40px; display:inline-flex; align-items:center; justify-content:center; transition:all 0.2s;}
.btn-magic-edit:hover { background: #7b61ff; color: white; transform: rotate(-5deg); box-shadow: 0 5px 12px rgba(123,97,255,0.3); }

.btn-magic-delete { background: #fee2e2; color: #ef4444; border: none; border-radius: 10px; width: 40px; height: 40px; display:inline-flex; align-items:center; justify-content:center; transition:all 0.2s;}
.btn-magic-delete:hover { background: #ef4444; color: white; transform: scale(1.1); box-shadow: 0 5px 12px rgba(239,68,68,0.3); }

/* Stylish Input layout for forms inside mega-trendy-modal */
.mega-trendy-modal .form-label { font-weight: 600; color: #334155; margin-bottom: 0.4rem; }
.mega-trendy-modal .form-control, .mega-trendy-modal .form-select {
  border-radius: 14px; border: 2px solid rgba(226,232,240,0.8); padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.6); transition: all 0.3s;
}
.mega-trendy-modal .form-control:focus, .mega-trendy-modal .form-select:focus {
  background: #ffffff; border-color: #7b61ff; box-shadow: 0 0 0 4px rgba(123,97,255,0.1); outline: none;
}
.btn-mega-save {
  background: linear-gradient(135deg, #7b61ff, #ff6b8a); border: none; padding: 0.8rem 2rem; border-radius: 20px; font-weight: 700; color: #fff;
  transition: transform 0.3s, box-shadow 0.3s; width: 100%; font-size: 1.1rem;
}
.btn-mega-save:hover {
  transform: translateY(-2px); box-shadow: 0 15px 25px rgba(123,97,255,0.4);
}


/* Report Controls - Elegant, colorful, animated layout */
.report-controls {
    background: linear-gradient(145deg, #ffffff, #f8f9fa);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 1.25rem;
    padding: 0.75rem 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.report-controls:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}
.filter-pill {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 2rem;
    padding: 0.25rem;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}
.filter-pill .form-control, .filter-pill .form-select {
    border: none;
    background: transparent;
    font-weight: 600;
    color: #495057;
    box-shadow: none !important;
}
.filter-pill label {
    font-size: 0.85rem;
    color: #6c757d;
    font-weight: 600;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding: 0 0.5rem;
}
.filter-pill .vr {
    width: 1px;
    background-color: #dee2e6;
    margin: 0 0.25rem;
}
.btn-animated {
    border-radius: 2rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.btn-animated:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}
.btn-animated:active {
    transform: translateY(1px);
}
.icon-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50% !important;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    color: #6c757d;
    transition: all 0.2s;
    margin: 0 0.25rem;
}
.icon-nav-btn:hover {
    background: #e9ecef;
    color: #495057;
    transform: scale(1.05);
}


@keyframes fadeUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   ULTRA NAVBAR
   ============================================================ */
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

.navbar-ultra {
  position: relative;
  z-index: 2300;
  margin: 1rem 1.5rem 0.5rem;
  padding: 0.5rem 1.25rem;
  border-radius: 1.75rem;
  background: linear-gradient(135deg, rgba(15,12,41,0.96) 0%, rgba(48,43,99,0.97) 50%, rgba(36,36,62,0.97) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 2px 8px rgba(107,91,255,0.15), inset 0 1px 0 rgba(255,255,255,0.06);
  animation: navbarSlideDown 0.5s cubic-bezier(0.2,0.9,0.2,1) both;
}
@keyframes navbarSlideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.navbar-ultra-container { width: 100%; }

/* Brand */
.navbar-ultra-brand {
  display: flex; align-items: center; gap: 0.6rem;
  text-decoration: none;
}
.navbar-orb {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #ff6a00, #ee0979, #6b5bff);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 14px rgba(238,9,121,0.5), 0 0 28px rgba(107,91,255,0.3);
  animation: orbSpin 8s linear infinite, orbPulse 2s ease-in-out infinite alternate;
  flex-shrink: 0;
}
.orb-inner {
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 8px rgba(255,255,255,0.8);
}
@keyframes orbSpin { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
@keyframes orbPulse { from { box-shadow: 0 0 14px rgba(238,9,121,0.5), 0 0 28px rgba(107,91,255,0.3); } to { box-shadow: 0 0 22px rgba(238,9,121,0.8), 0 0 44px rgba(107,91,255,0.5); } }

.brand-name {
  font-size: 1.4rem; font-weight: 900; color: #ffffff;
  letter-spacing: -0.5px;
}
.brand-dot {
  background: linear-gradient(135deg, #ff6a00, #ee0979);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* Nav links */
.navbar-ultra-nav { gap: 0.2rem; }
.nav-ultra-link {
  color: rgba(255,255,255,0.65) !important;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.5rem 0.9rem !important;
  border-radius: 1rem;
  display: flex; align-items: center; gap: 0.45rem;
  transition: all 0.25s cubic-bezier(0.2,0.9,0.2,1);
  white-space: nowrap;
  position: relative;
}
.nav-ultra-link:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,0.1) !important;
  transform: translateY(-2px);
}
.nav-ultra-link::after {
  content: '';
  position: absolute; bottom: 4px; left: 50%; right: 50%;
  height: 2px; border-radius: 99px;
  background: linear-gradient(90deg, #ff6a00, #ee0979, #6b5bff);
  transition: left 0.25s ease, right 0.25s ease;
}
.nav-ultra-link:hover::after { left: 14px; right: 14px; }
.nav-link-icon { font-size: 0.95rem; opacity: 0.85; }

/* Toggler */
.navbar-ultra-toggler {
  background: transparent; border: none;
  display: flex; flex-direction: column; gap: 5px;
  padding: 6px; border-radius: 10px;
  transition: background 0.2s;
}
.navbar-ultra-toggler:hover { background: rgba(255,255,255,0.08); }
.toggler-bar {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #ff6a00, #6b5bff);
  transition: all 0.3s ease;
}

/* Avatar chip */
.nav-avatar-chip {
  display: flex; align-items: center; gap: 0.6rem;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 2rem;
  padding: 0.35rem 0.85rem 0.35rem 0.35rem;
}
.avatar-circle {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #6b5bff, #ff6a00);
  color: #fff; font-weight: 800; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(107,91,255,0.4);
}
.avatar-name { font-size: 0.82rem; font-weight: 700; color: #fff; line-height: 1.1; }
.avatar-role { font-size: 0.7rem; color: rgba(255,255,255,0.5); text-transform: capitalize; }

/* Logout button */
.btn-logout {
  background: linear-gradient(135deg, rgba(255,106,0,0.15), rgba(238,9,121,0.15));
  border: 1px solid rgba(255,106,0,0.3);
  color: rgba(255,255,255,0.85);
  border-radius: 1rem;
  padding: 0.45rem 1rem;
  font-weight: 600; font-size: 0.85rem;
  transition: all 0.25s ease;
  display: flex; align-items: center; gap: 0.4rem;
}
.btn-logout:hover {
  background: linear-gradient(135deg, #ff6a00, #ee0979);
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(238,9,121,0.3);
}
.btn-nav-signin {
  background: linear-gradient(135deg, #ff6a00, #ee0979);
  color: #fff; border: none;
  border-radius: 1rem; padding: 0.5rem 1.2rem;
  font-weight: 700; font-size: 0.88rem;
  display: flex; align-items: center; gap: 0.4rem;
  transition: all 0.25s ease;
  box-shadow: 0 6px 20px rgba(238,9,121,0.35);
}
.btn-nav-signin:hover {
  color: #fff; transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(238,9,121,0.5);
}

@media (max-width: 991px) {
  .navbar-ultra { margin: 0.75rem; border-radius: 1.25rem; }
  .navbar-collapse { background: rgba(15,12,41,0.98); border-radius: 1.25rem; margin-top: 0.5rem; padding: 1rem; }
  .nav-ultra-link { border-radius: 0.75rem; }
  .navbar-ultra-actions { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.08); }
}

/* ============================================================
   PAGE BACKGROUND
   ============================================================ */
body {
  background: linear-gradient(135deg, #f0f0ff 0%, #fff5ff 40%, #f0fff8 100%);
  min-height: 100vh;
}

/* Ambient Orbs */
.dash-orb {
  position: fixed; border-radius: 50%;
  filter: blur(80px); opacity: 0.18;
  pointer-events: none; z-index: 0;
}
.dash-orb-1 {
  width: 500px; height: 500px; top: -150px; left: -100px;
  background: radial-gradient(circle, #7b61ff, #6b5bff);
  animation: orbFloat 12s ease-in-out infinite;
}
.dash-orb-2 {
  width: 400px; height: 400px; top: 30%; right: -100px;
  background: radial-gradient(circle, #ff6a00, #ee0979);
  animation: orbFloat 15s ease-in-out infinite reverse;
}
.dash-orb-3 {
  width: 350px; height: 350px; bottom: 10%; left: 30%;
  background: radial-gradient(circle, #00d2ff, #43e97b);
  animation: orbFloat 18s ease-in-out infinite 3s;
}
@keyframes orbFloat {
  0%,100% { transform: translateY(0) scale(1); }
  33% { transform: translateY(-30px) scale(1.05); }
  66% { transform: translateY(20px) scale(0.97); }
}
#appContent { position: relative; z-index: 1; }

/* ============================================================
   DASHBOARD HERO
   ============================================================ */
.dashboard-hero {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem;
  margin-bottom: 2rem; padding: 2rem 0 0.5rem;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: linear-gradient(135deg, rgba(107,91,255,0.12), rgba(255,106,0,0.08));
  border: 1px solid rgba(107,91,255,0.2);
  color: #7b61ff; font-weight: 700; font-size: 0.8rem;
  padding: 0.35rem 0.85rem; border-radius: 99px;
  margin-bottom: 0.75rem; letter-spacing: 0.3px;
}
.hero-greeting {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 900; color: #0f172a; line-height: 1.15;
  letter-spacing: -0.5px; margin-bottom: 0.4rem;
}
.hero-name {
  background: linear-gradient(135deg, #6b5bff, #ee0979, #ff6a00);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: nameGlow 4s ease-in-out infinite alternate;
}
@keyframes nameGlow {
  from { filter: drop-shadow(0 0 6px rgba(107,91,255,0.4)); }
  to   { filter: drop-shadow(0 0 14px rgba(238,9,121,0.5)); }
}
.hero-sub { font-size: 1rem; color: #64748b; margin: 0; }

/* Date filter pill */
.hero-date-filter { display: flex; align-items: flex-start; padding-top: 0.5rem; }
.date-filter-pill {
  display: flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(107,91,255,0.15);
  border-radius: 999px;
  padding: 0.5rem 0.85rem;
  box-shadow: 0 4px 16px rgba(107,91,255,0.1);
  color: #64748b; font-size: 0.85rem;
  flex-wrap: nowrap;
}
.date-filter-input {
  border: none; background: transparent; outline: none;
  font-size: 0.85rem; font-weight: 600; color: #334155;
  padding: 0; width: 130px;
}
.date-sep { color: #94a3b8; font-weight: 600; }
.btn-filter-apply {
  background: linear-gradient(135deg, #6b5bff, #ee0979);
  color: #fff; border: none; border-radius: 999px;
  padding: 0.35rem 1rem; font-size: 0.8rem; font-weight: 700;
  cursor: pointer; transition: all 0.2s ease;
}
.btn-filter-apply:hover { transform: scale(1.05); box-shadow: 0 6px 16px rgba(107,91,255,0.35); }

/* ============================================================
   STAT CARDS
   ============================================================ */
.stat-card {
  border-radius: 1.25rem;
  padding: 1.5rem 1.25rem 1.25rem;
  text-align: center;
  position: relative; overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.5);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
}
.stat-card:hover { transform: translateY(-10px) scale(1.03); }

.stat-card-billing  { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; box-shadow: 0 12px 28px rgba(102,126,234,0.35); }
.stat-card-billing:hover  { box-shadow: 0 22px 44px rgba(102,126,234,0.5); }

.stat-card-purchases { background: linear-gradient(135deg, #f093fb, #f5576c); color: #fff; box-shadow: 0 12px 28px rgba(245,87,108,0.35); }
.stat-card-purchases:hover { box-shadow: 0 22px 44px rgba(245,87,108,0.5); }

.stat-card-expenses { background: linear-gradient(135deg, #4facfe, #00f2fe); color: #1a202c; box-shadow: 0 12px 28px rgba(79,172,254,0.35); }
.stat-card-expenses:hover { box-shadow: 0 22px 44px rgba(79,172,254,0.5); }

.stat-card-net { background: linear-gradient(135deg, #43e97b, #38f9d7); color: #1a202c; box-shadow: 0 12px 28px rgba(67,233,123,0.35); }
.stat-card-net:hover { box-shadow: 0 22px 44px rgba(67,233,123,0.5); }

.stat-icon-wrap {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin: 0 auto 0.75rem;
  backdrop-filter: blur(4px);
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.3);
}
.stat-label {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.7px; opacity: 0.8; margin-bottom: 0.35rem;
}
.stat-value {
  font-size: 1.65rem; font-weight: 900; letter-spacing: -0.5px;
  line-height: 1; margin-bottom: 0.5rem;
}
.stat-sub { font-size: 0.75rem; opacity: 0.75; }
.stat-sub-label { font-weight: 600; }
.stat-month { font-weight: 700; font-size: 0.78rem; min-width: 60px; }
.stat-nav-btn {
  background: rgba(255,255,255,0.2); border: none; color: inherit;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 1rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.2s;
}
.stat-nav-btn:hover { background: rgba(255,255,255,0.35); }

/* Shine effect */
.stat-shine {
  position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.stat-card:hover .stat-shine { left: 130%; }

/* ============================================================
   GLASS CARDS (Summary, Chart, Panel)
   ============================================================ */
.glass-card {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 8px 32px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
  transition: transform 0.3s cubic-bezier(0.2,0.9,0.2,1), box-shadow 0.3s ease;
}
.glass-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(15,23,42,0.12); }
.glass-card-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.5rem;
}
.glass-card-title {
  font-size: 1.05rem; font-weight: 800; color: #0f172a; letter-spacing: -0.2px;
}
.glass-card-sub { font-size: 0.8rem; color: #64748b; margin-top: 2px; }

/* Live badge */
.badge-live {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(67,233,123,0.12);
  border: 1px solid rgba(67,233,123,0.25);
  color: #15803d; font-size: 0.72rem; font-weight: 700;
  padding: 0.2rem 0.6rem; border-radius: 99px;
  white-space: nowrap;
}
.badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  animation: badgePulse 1.5s ease-in-out infinite;
}
@keyframes badgePulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.75); }
}

/* Bar rows — colorful per-metric */
.bar-rows { display: flex; flex-direction: column; gap: 0.75rem; }
.bar-row { display: flex; align-items: center; gap: 0.75rem; }
.bar-label {
  width: 90px; flex-shrink: 0;
  font-size: 0.78rem; font-weight: 700; color: #475569;
  display: flex; align-items: center; gap: 0.4rem;
}
.bar-track {
  flex: 1; height: 8px; background: rgba(15,23,42,0.06);
  border-radius: 99px; overflow: hidden;
}
.bar-fill {
  height: 100%; width: 0; border-radius: 99px;
  transition: width 1.2s cubic-bezier(0.2,0.9,0.2,1) 0.2s;
}
.bar-purchase { background: linear-gradient(90deg, #f093fb, #f5576c); }
.bar-expense  { background: linear-gradient(90deg, #4facfe, #00f2fe); }
.bar-billing  { background: linear-gradient(90deg, #667eea, #764ba2); }
.bar-net      { background: linear-gradient(90deg, #43e97b, #38f9d7); }
.bar-num { font-size: 0.78rem; font-weight: 700; color: #334155; min-width: 70px; text-align: right; }

/* Panel cards (attendance, appointments) */
.glass-card-panel { cursor: pointer; }
  33% { transform: translateY(-30px) scale(1.05); }
  66% { transform: translateY(20px) scale(0.97); }
}
#appContent { position: relative; z-index: 1; }

/* ============================================================
   DASHBOARD HERO
   ============================================================ */
.dashboard-hero {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem;
  margin-bottom: 2rem; padding: 2rem 0 0.5rem;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: linear-gradient(135deg, rgba(107,91,255,0.12), rgba(255,106,0,0.08));
  border: 1px solid rgba(107,91,255,0.2);
  color: #7b61ff; font-weight: 700; font-size: 0.8rem;
  padding: 0.35rem 0.85rem; border-radius: 99px;
  margin-bottom: 0.75rem; letter-spacing: 0.3px;
}
.hero-greeting {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 900; color: #0f172a; line-height: 1.15;
  letter-spacing: -0.5px; margin-bottom: 0.4rem;
}
.hero-name {
  background: linear-gradient(135deg, #6b5bff, #ee0979, #ff6a00);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: nameGlow 4s ease-in-out infinite alternate;
}
@keyframes nameGlow {
  from { filter: drop-shadow(0 0 6px rgba(107,91,255,0.4)); }
  to   { filter: drop-shadow(0 0 14px rgba(238,9,121,0.5)); }
}
.hero-sub { font-size: 1rem; color: #64748b; margin: 0; }

/* Date filter pill */
.hero-date-filter { display: flex; align-items: flex-start; padding-top: 0.5rem; }
.date-filter-pill {
  display: flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(107,91,255,0.15);
  border-radius: 999px;
  padding: 0.5rem 0.85rem;
  box-shadow: 0 4px 16px rgba(107,91,255,0.1);
  color: #64748b; font-size: 0.85rem;
  flex-wrap: nowrap;
}
.date-filter-input {
  border: none; background: transparent; outline: none;
  font-size: 0.85rem; font-weight: 600; color: #334155;
  padding: 0; width: 130px;
}
.date-sep { color: #94a3b8; font-weight: 600; }
.btn-filter-apply {
  background: linear-gradient(135deg, #6b5bff, #ee0979);
  color: #fff; border: none; border-radius: 999px;
  padding: 0.35rem 1rem; font-size: 0.8rem; font-weight: 700;
  cursor: pointer; transition: all 0.2s ease;
}
.btn-filter-apply:hover { transform: scale(1.05); box-shadow: 0 6px 16px rgba(107,91,255,0.35); }

/* ============================================================
   STAT CARDS
   ============================================================ */
.stat-card {
  border-radius: 1.25rem;
  padding: 1.5rem 1.25rem 1.25rem;
  text-align: center;
  position: relative; overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.5);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
}
.stat-card:hover { transform: translateY(-10px) scale(1.03); }

.stat-card-billing  { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; box-shadow: 0 12px 28px rgba(102,126,234,0.35); }
.stat-card-billing:hover  { box-shadow: 0 22px 44px rgba(102,126,234,0.5); }

.stat-card-purchases { background: linear-gradient(135deg, #f093fb, #f5576c); color: #fff; box-shadow: 0 12px 28px rgba(245,87,108,0.35); }
.stat-card-purchases:hover { box-shadow: 0 22px 44px rgba(245,87,108,0.5); }

.stat-card-expenses { background: linear-gradient(135deg, #4facfe, #00f2fe); color: #1a202c; box-shadow: 0 12px 28px rgba(79,172,254,0.35); }
.stat-card-expenses:hover { box-shadow: 0 22px 44px rgba(79,172,254,0.5); }

.stat-card-net { background: linear-gradient(135deg, #43e97b, #38f9d7); color: #1a202c; box-shadow: 0 12px 28px rgba(67,233,123,0.35); }
.stat-card-net:hover { box-shadow: 0 22px 44px rgba(67,233,123,0.5); }

.stat-icon-wrap {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin: 0 auto 0.75rem;
  backdrop-filter: blur(4px);
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.3);
}
.stat-label {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.7px; opacity: 0.8; margin-bottom: 0.35rem;
}
.stat-value {
  font-size: 1.65rem; font-weight: 900; letter-spacing: -0.5px;
  line-height: 1; margin-bottom: 0.5rem;
}
.stat-sub { font-size: 0.75rem; opacity: 0.75; }
.stat-sub-label { font-weight: 600; }
.stat-month { font-weight: 700; font-size: 0.78rem; min-width: 60px; }
.stat-nav-btn {
  background: rgba(255,255,255,0.2); border: none; color: inherit;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 1rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.2s;
}
.stat-nav-btn:hover { background: rgba(255,255,255,0.35); }

/* Shine effect */
.stat-shine {
  position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.stat-card:hover .stat-shine { left: 130%; }

/* ============================================================
   GLASS CARDS (Summary, Chart, Panel)
   ============================================================ */
.glass-card {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 8px 32px rgba(15,23,42,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
  transition: transform 0.3s cubic-bezier(0.2,0.9,0.2,1), box-shadow 0.3s ease;
}
.glass-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(15,23,42,0.12); }
.glass-card-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.5rem;
}
.glass-card-title {
  font-size: 1.05rem; font-weight: 800; color: #0f172a; letter-spacing: -0.2px;
}
.glass-card-sub { font-size: 0.8rem; color: #64748b; margin-top: 2px; }

/* Live badge */
.badge-live {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(67,233,123,0.12);
  border: 1px solid rgba(67,233,123,0.25);
  color: #15803d; font-size: 0.72rem; font-weight: 700;
  padding: 0.2rem 0.6rem; border-radius: 99px;
  white-space: nowrap;
}
.badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  animation: badgePulse 1.5s ease-in-out infinite;
}
@keyframes badgePulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.75); }
}

/* Bar rows — colorful per-metric */
.bar-rows { display: flex; flex-direction: column; gap: 0.75rem; }
.bar-row { display: flex; align-items: center; gap: 0.75rem; }
.bar-label {
  width: 90px; flex-shrink: 0;
  font-size: 0.78rem; font-weight: 700; color: #475569;
  display: flex; align-items: center; gap: 0.4rem;
}
.bar-track {
  flex: 1; height: 8px; background: rgba(15,23,42,0.06);
  border-radius: 99px; overflow: hidden;
}
.bar-fill {
  height: 100%; width: 0; border-radius: 99px;
  transition: width 1.2s cubic-bezier(0.2,0.9,0.2,1) 0.2s;
}
.bar-purchase { background: linear-gradient(90deg, #f093fb, #f5576c); }
.bar-expense  { background: linear-gradient(90deg, #4facfe, #00f2fe); }
.bar-billing  { background: linear-gradient(90deg, #667eea, #764ba2); }
.bar-net      { background: linear-gradient(90deg, #43e97b, #38f9d7); }
.bar-num { font-size: 0.78rem; font-weight: 700; color: #334155; min-width: 70px; text-align: right; }

/* Panel cards (attendance, appointments) */
.glass-card-panel { cursor: pointer; }
.glass-card-panel:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(15,23,42,0.12); }
.panel-nav-btn {
  background: rgba(15,23,42,0.06); border: none;
  color: #334155; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8rem; cursor: pointer; transition: all 0.2s;
}
.panel-nav-btn:hover { background: rgba(107,91,255,0.12); color: #6b5bff; transform: scale(1.1); }
.panel-date { font-size: 0.82rem; font-weight: 700; color: #334155; }
.text-violet { color: #7b61ff; }
.text-pink   { color: #ee0979; }

/* ================================================================
   SNAV — Sleek top navbar (CPU-efficient, no hue-rotate/blur loops)
   ================================================================ */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: #f1f5f9;
}

/* ------ Navbar shell ------ */
.snav {
  position: sticky;
  top: 0;
  z-index: 2300;
  background: linear-gradient(98deg, #0f0c29 0%, #302b63 55%, #24243e 100%);
  box-shadow: 0 4px 24px rgba(0,0,0,0.28);
  animation: snavSlideIn 0.45s cubic-bezier(0.2,0.9,0.2,1) both;
}
@keyframes snavSlideIn {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}
.snav-inner {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 1.25rem;
  height: 62px;
  max-width: 100%;
}

/* ------ Brand ------ */
.snav-brand {
  display: flex; align-items: center; gap: 0.5rem;
  text-decoration: none; flex-shrink: 0;
  padding-right: 1rem;
  border-right: 1px solid rgba(255,255,255,0.1);
  margin-right: 1rem;
}
.snav-logo {
  font-size: 1.4rem; line-height: 1;
  background: linear-gradient(135deg, #a78bfa, #f472b6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.snav-brand-text {
  font-size: 1.2rem; font-weight: 900; color: #fff; letter-spacing: -0.4px;
}
.snav-brand-accent {
  color: #a78bfa;
}

/* ------ Nav Links ------ */
.snav-links {
  display: flex; align-items: center; gap: 2px;
  flex: 1; overflow: hidden;
}
.snav-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border-radius: 0.6rem;
  font-size: 0.82rem; font-weight: 600;
  color: rgba(255,255,255,0.62);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
  will-change: transform;
}
.snav-link i { font-size: 0.95rem; }
.snav-link:hover {
  color: var(--lc, #a78bfa);
  background: rgba(255,255,255,0.07);
  transform: translateY(-2px);
}
.snav-link::after {
  content: '';
  position: absolute; bottom: 2px; left: 12px; right: 12px;
  height: 2px; border-radius: 99px;
  background: var(--lc, #a78bfa);
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.2s ease;
}
.snav-link:hover::after { transform: scaleX(1); }

/* ------ Right side ------ */
.snav-right {
  display: flex; align-items: center; gap: 0.75rem;
  flex-shrink: 0; margin-left: auto; padding-left: 0.75rem;
}

/* ------ Clock ------ */
.snav-clock {
  text-align: right;
  border-right: 1px solid rgba(255,255,255,0.1);
  padding-right: 0.75rem;
  line-height: 1.1;
}
.snav-clock-time {
  font-size: 1.05rem; font-weight: 800; color: #a78bfa;
  font-variant-numeric: tabular-nums; letter-spacing: 0.5px;
}
.snav-clock-date {
  font-size: 0.68rem; font-weight: 500; color: rgba(255,255,255,0.45);
  white-space: nowrap;
}

/* ------ Avatar chip ------ */
.snav-user {
  display: flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 2rem; padding: 0.3rem 0.7rem 0.3rem 0.3rem;
}
.snav-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa, #f472b6);
  color: #fff; font-weight: 900; font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.snav-user-name { font-size: 0.78rem; font-weight: 700; color: #fff; line-height: 1.1; }
.snav-user-role { font-size: 0.65rem; color: rgba(255,255,255,0.45); }

/* ------ Logout / Signin ------ */
.snav-logout {
  display: flex; align-items: center; gap: 0.35rem;
  background: rgba(248,113,113,0.12);
  border: 1px solid rgba(248,113,113,0.25);
  color: #fca5a5; border-radius: 0.6rem;
  padding: 0.4rem 0.85rem; font-size: 0.8rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  will-change: transform;
}
.snav-logout:hover {
  background: rgba(248,113,113,0.25); color: #fff;
  transform: translateY(-2px);
}
.snav-signin {
  display: flex; align-items: center; gap: 0.35rem;
  background: linear-gradient(135deg, #a78bfa, #f472b6);
  color: #fff; border: none; border-radius: 0.6rem;
  padding: 0.4rem 1rem; font-size: 0.8rem; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  transition: opacity 0.18s ease, transform 0.18s ease;
  will-change: transform;
}
.snav-signin:hover { opacity: 0.88; transform: translateY(-2px); color: #fff; }

/* ------ Mobile hamburger ------ */
.snav-hamburger {
  background: transparent; border: none;
  display: flex; flex-direction: column; gap: 4px;
  padding: 4px; cursor: pointer;
}
.snav-hamburger span {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: rgba(255,255,255,0.7);
  transition: all 0.25s ease;
}
.snav-hamburger.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.snav-hamburger.active span:nth-child(2) { opacity: 0; }
.snav-hamburger.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ------ Mobile drawer ------ */
.snav-drawer {
  display: none; flex-direction: column; gap: 4px;
  padding: 0.75rem 1.25rem 1rem;
  background: rgba(15,12,41,0.98);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.snav-drawer.open { display: flex; }
.snav-drawer-link {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.6rem 0.75rem; border-radius: 0.6rem;
  color: rgba(255,255,255,0.7); text-decoration: none;
  font-size: 0.88rem; font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}
.snav-drawer-link:hover {
  background: rgba(255,255,255,0.07); color: var(--lc, #a78bfa);
}

@media (max-width: 991px) {
  .snav-links { display: none; }
  .snav-clock { display: none; }
}
@media (min-width: 992px) {
  .snav-drawer { display: none !important; }
}

/* ================================================================
   KPI CARDS (Glassmorphism & Neon Glow)
   ================================================================ */
#appContent { position: relative; }

.kpi-card {
  border-radius: 1.25rem;
  padding: 1.25rem 1.25rem 1rem;
  position: relative; overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: kpiEntry 0.5s cubic-bezier(0.2,0.9,0.2,1) both;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease, filter 0.3s ease;
  will-change: transform, box-shadow;
}
.kpi-card:hover { 
  transform: translateY(-8px) scale(1.025); 
  filter: brightness(1.05);
}
.kpi-card:active {
  transform: translateY(-2px) scale(0.98);
}

/* Entry stagger via nth-child */
#kpiRow > div:nth-child(1) .kpi-card { animation-delay: 0.05s; }
#kpiRow > div:nth-child(2) .kpi-card { animation-delay: 0.12s; }
#kpiRow > div:nth-child(3) .kpi-card { animation-delay: 0.19s; }
#kpiRow > div:nth-child(4) .kpi-card { animation-delay: 0.26s; }

@keyframes kpiEntry {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Card themes with vibrant gradients and neon hover glows */
.kpi-billing {
  background: linear-gradient(135deg, rgba(123,97,255,0.9) 0%, rgba(102,126,234,0.95) 100%);
  color: #fff; box-shadow: 0 10px 28px rgba(123,97,255,0.25), inset 0 2px 4px rgba(255,255,255,0.3);
}
.kpi-billing:hover  { box-shadow: 0 20px 48px rgba(123,97,255,0.5), 0 0 0 2px rgba(123,97,255,0.3); }

.kpi-purchases {
  background: linear-gradient(135deg, rgba(255,107,138,0.9) 0%, rgba(245,87,108,0.95) 100%);
  color: #fff; box-shadow: 0 10px 28px rgba(255,107,138,0.25), inset 0 2px 4px rgba(255,255,255,0.3);
}
.kpi-purchases:hover { box-shadow: 0 20px 48px rgba(255,107,138,0.5), 0 0 0 2px rgba(255,107,138,0.3); }

.kpi-expenses {
  background: linear-gradient(135deg, rgba(245,158,11,0.9) 0%, rgba(249,115,22,0.95) 100%);
  color: #fff; box-shadow: 0 10px 28px rgba(245,158,11,0.25), inset 0 2px 4px rgba(255,255,255,0.3);
}
.kpi-expenses:hover { box-shadow: 0 20px 48px rgba(245,158,11,0.5), 0 0 0 2px rgba(245,158,11,0.3); }

.kpi-net {
  background: linear-gradient(135deg, rgba(42,245,152,0.9) 0%, rgba(16,185,129,0.95) 100%);
  color: #064e3b; box-shadow: 0 10px 28px rgba(42,245,152,0.25), inset 0 2px 4px rgba(255,255,255,0.4);
}
.kpi-net:hover { box-shadow: 0 20px 48px rgba(42,245,152,0.5), 0 0 0 2px rgba(42,245,152,0.3); }

/* Inner layout */
.kpi-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.75rem;
}
.kpi-icon {
  width: 44px; height: 44px; border-radius: 0.75rem;
  background: rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.3);
  transition: transform 0.3s ease;
}
.kpi-card:hover .kpi-icon { transform: rotate(10deg) scale(1.1); }
.kpi-trend {
  font-size: 1.05rem; opacity: 0.85;
}
.kpi-month-nav {
  display: flex; align-items: center; gap: 4px;
}
.kpi-nav-btn {
  background: rgba(255,255,255,0.2); border: none; color: inherit;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 0.95rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.kpi-nav-btn:hover { background: rgba(255,255,255,0.4); transform: scale(1.1); }
.kpi-month {
  font-size: 0.7rem; font-weight: 700; min-width: 36px; text-align: center; opacity: 0.9;
}
.kpi-value {
  font-size: 1.8rem; font-weight: 900; letter-spacing: -0.5px;
  line-height: 1; margin-bottom: 0.25rem; text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.kpi-label {
  font-size: 0.75rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.8px; opacity: 0.8; margin-bottom: 0.4rem;
}
.kpi-sub {
  font-size: 0.72rem; opacity: 0.8; margin-bottom: 0.5rem;
}
.kpi-sub strong { font-weight: 900; }

/* Bottom progress bar */
.kpi-bar {
  height: 6px; border-radius: 99px;
  background: rgba(0,0,0,0.1);
  overflow: hidden;
  margin-top: 0.5rem;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.kpi-bar-fill {
  height: 100%; border-radius: 99px;
  background: rgba(255,255,255,0.85);
  transition: width 1s cubic-bezier(0.2,0.9,0.2,1) 0.3s;
  box-shadow: 0 0 8px rgba(255,255,255,0.5);
}

/* ================================================================
   PAGE BACKGROUND & ANIMATED BLOBS
   ================================================================ */
body {
  background: #f4f6fb;
  min-height: 100vh;
  position: relative;
}
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  background: 
    radial-gradient(circle at 15% 10%, rgba(167,139,250,0.12) 0%, transparent 40%),
    radial-gradient(circle at 85% 90%, rgba(56,189,248,0.12) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.8) 0%, rgba(244,246,251,0.2) 100%);
  pointer-events: none;
}

.bg-blob {
  display: none; /* Removed for CPU optimization */
}

/* ================================================================
   GLASS CARDS & TRENDY PANELS
   ================================================================ */
.glass-card {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05), inset 0 2px 4px rgba(255,255,255,0.7);
  border-radius: 1.25rem;
  padding: 1.5rem;
  transition: transform 0.3s cubic-bezier(0.2,0.9,0.2,1), box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}
.glass-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #6b5bff, #ff6b95, #34d399);
  opacity: 0.6;
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.glass-card:hover::before {
  opacity: 1;
  filter: brightness(1.2);
}

.glass-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
}

.glass-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.glass-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0b1220;
  letter-spacing: -0.3px;
}

.glass-card-sub {
  font-size: 0.85rem;
  color: #64748b;
  margin-top: 0.2rem;
}

/* Stagger animations for rows/items inside glass-cards */
.stagger-4 { animation: cardReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both; }
.stagger-5 { animation: cardReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both; }

@keyframes cardReveal {
  0%   { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0); }
}

.bar-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.85rem;
  transition: transform 0.2s ease, background 0.2s ease;
  padding: 0.4rem;
  border-radius: 0.5rem;
}
.bar-row:hover {
  transform: translateX(4px);
  background: rgba(255,255,255,0.4);
}
.bar-label {
  width: 90px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.bar-track {
  flex: 1;
  height: 8px;
  background: rgba(0,0,0,0.05);
  border-radius: 99px;
  margin: 0 1rem;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 1s cubic-bezier(0.2,0.9,0.2,1);
}
.bar-purchase { background: linear-gradient(90deg, #ff9a9e 0%, #fecfef 100%); }
.bar-expense { background: linear-gradient(90deg, #f6d365 0%, #fda085 100%); }
.bar-billing { background: linear-gradient(90deg, #a18cd1 0%, #fbc2eb 100%); }
.bar-net { background: linear-gradient(90deg, #84fab0 0%, #8fd3f4 100%); }
.bar-num {
  width: 70px;
  text-align: right;
  font-weight: 700;
  font-size: 0.9rem;
  color: #0f172a;
}


/* ================================================================
   CHART EXPAND MODAL
   ================================================================ */

/* Expand hint badge on the small chart card */
.chart-expand-hint {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.72rem; font-weight: 700;
  color: #a78bfa;
  background: rgba(167,139,250,0.1);
  border: 1px solid rgba(167,139,250,0.2);
  border-radius: 99px; padding: 0.25rem 0.65rem;
  cursor: pointer;
  animation: expandHintPulse 2.5s ease-in-out infinite;
  white-space: nowrap;
}
@keyframes expandHintPulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.chart-canvas-wrap:hover .chart-expand-hint { opacity: 1; }

/* Overlay */
.chart-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 4, 20, 0.72);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s ease;
  overflow: hidden;
}
.chart-modal-overlay.cm-visible { opacity: 1; }
.chart-modal-overlay.cm-closing { opacity: 0; }

/* Background animated orbs inside overlay */
.cm-orb {
  position: absolute; border-radius: 50%;
  pointer-events: none; z-index: 0;
  opacity: 0.55;
  filter: blur(70px);
}
.cm-orb-1 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, #7c3aed, transparent 70%);
  top: -120px; left: -120px;
  animation: cmOrb1 8s ease-in-out infinite alternate;
}
.cm-orb-2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, #0ea5e9, transparent 70%);
  bottom: -80px; right: -60px;
  animation: cmOrb1 10s ease-in-out infinite alternate-reverse;
}
.cm-orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, #10b981, transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  animation: cmOrb1 12s ease-in-out infinite alternate;
}
@keyframes cmOrb1 {
  from { transform: translate(0,0); }
  to   { transform: translate(40px, -40px); }
}

/* Modal box */
.chart-modal-box {
  position: relative; z-index: 10;
  background: linear-gradient(145deg, rgba(15,12,41,0.97), rgba(24,20,60,0.98));
  border: 1px solid rgba(167,139,250,0.2);
  border-radius: 1.75rem;
  box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset;
  padding: 2rem 2rem 1.75rem;
  width: min(92vw, 900px);
  max-height: 90vh;
  display: flex; flex-direction: column; gap: 1.25rem;
  overflow: hidden;
  opacity: 0; transform: scale(0.88) translateY(30px);
  transition: opacity 0.38s cubic-bezier(0.2,0.9,0.2,1),
              transform 0.38s cubic-bezier(0.2,0.9,0.2,1);
}
.cm-box-in  { opacity: 1 !important; transform: scale(1) translateY(0) !important; }
.cm-box-out { opacity: 0 !important; transform: scale(0.88) translateY(20px) !important; }

/* Header */
.cm-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.cm-header-left { display: flex; align-items: center; gap: 0.9rem; }
.cm-icon {
  width: 48px; height: 48px; border-radius: 0.875rem;
  background: linear-gradient(135deg, #a78bfa, #34d399);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; color: #fff; flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(167,139,250,0.35);
}
.cm-title {
  font-size: 1.3rem; font-weight: 900; color: #f1f5f9; letter-spacing: -0.3px;
}
.cm-subtitle {
  font-size: 0.8rem; color: rgba(255,255,255,0.45); font-weight: 500; margin-top: 2px;
}
.cm-close {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.6); font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.cm-close:hover { background: rgba(248,113,113,0.2); color: #f87171; transform: rotate(90deg); }

/* Summary chips */
.cm-chips {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
}
.cm-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.9rem; border-radius: 99px;
  font-size: 0.82rem; font-weight: 800;
  animation: cmChipIn 0.4s cubic-bezier(0.2,0.9,0.2,1) both;
}
.cm-chip:nth-child(1) { animation-delay: 0.08s; }
.cm-chip:nth-child(2) { animation-delay: 0.14s; }
.cm-chip:nth-child(3) { animation-delay: 0.20s; }
.cm-chip:nth-child(4) { animation-delay: 0.26s; }

@keyframes cmChipIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cm-chip-income   { background: rgba(167,139,250,0.15); color: #c4b5fd; border: 1px solid rgba(167,139,250,0.25); }
.cm-chip-purchase { background: rgba(251,146,60,0.15);  color: #fdba74; border: 1px solid rgba(251,146,60,0.25); }
.cm-chip-expense  { background: rgba(248,113,113,0.15); color: #fca5a5; border: 1px solid rgba(248,113,113,0.25); }
.cm-chip-net      { background: rgba(52,211,153,0.15);  color: #6ee7b7; border: 1px solid rgba(52,211,153,0.25); }

/* Chart wrapper inside modal */
.cm-chart-wrap {
  flex: 1; min-height: 320px; max-height: 440px;
  position: relative;
  animation: cmChartIn 0.5s cubic-bezier(0.2,0.9,0.2,1) 0.15s both;
}
@keyframes cmChartIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cm-chart-wrap canvas { width: 100% !important; height: 100% !important; }

@media (max-width: 600px) {
  .chart-modal-box { padding: 1.25rem 1rem 1rem; border-radius: 1.25rem; }
  .cm-chips { gap: 0.4rem; }
  .cm-chip  { font-size: 0.74rem; padding: 0.35rem 0.65rem; }
  .cm-chart-wrap { min-height: 220px; }
}

/* ================================================================
   KPI-NET & KPI-EXPENSES — HIGH CONTRAST TEXT
   Both cards have LIGHT backgrounds (green/teal & sky-blue).
   Shared kpi-* styles use opacity which is fine on dark cards but
   kills contrast on bright ones. These overrides use explicit dark
   ink colors instead, placed at end-of-file to always win.
   ================================================================ */

/* ── kpi-net (green → teal) ── */
.kpi-net {
  /* Slightly deeper gradient so the darkest text pops */
  background: linear-gradient(135deg, #22c55e 0%, #10b981 100%) !important;
  color: #052e16 !important; /* very dark green — base color for inheritance */
}

.kpi-net .kpi-value {
  color: #052e16 !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.25);
}
.kpi-net .kpi-label {
  color: #14532d !important;       /* dark green, not semi-transparent */
  opacity: 1 !important;
  letter-spacing: 1px;
}
.kpi-net .kpi-sub {
  color: #166534 !important;
  opacity: 1 !important;
}
.kpi-net .kpi-sub strong {
  color: #052e16 !important;
  font-weight: 900 !important;
}
.kpi-net .kpi-month {
  color: #14532d !important;
  opacity: 1 !important;
  font-weight: 800 !important;
}
.kpi-net .kpi-icon {
  background: rgba(5,46,22,0.15) !important;
  color: #052e16 !important;
  box-shadow: inset 0 2px 4px rgba(5,46,22,0.12) !important;
}
.kpi-net .kpi-nav-btn {
  background: rgba(5,46,22,0.12) !important;
  color: #052e16 !important;
  font-weight: 700;
}
.kpi-net .kpi-nav-btn:hover {
  background: rgba(5,46,22,0.25) !important;
}
.kpi-net .kpi-bar {
  background: rgba(5,46,22,0.15) !important;
}
.kpi-net .kpi-bar-fill {
  background: rgba(5,46,22,0.45) !important;
}

/* ── kpi-expenses (sky-blue) ── */
.kpi-expenses {
  background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%) !important;
  color: #0c1a2e !important;
}
.kpi-expenses .kpi-value {
  color: #0c1a2e !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px rgba(255,255,255,0.2);
}
.kpi-expenses .kpi-label {
  color: #0e2a47 !important;
  opacity: 1 !important;
  letter-spacing: 1px;
}
.kpi-expenses .kpi-sub {
  color: #0e3559 !important;
  opacity: 1 !important;
}
.kpi-expenses .kpi-month {
  color: #0e2a47 !important;
  opacity: 1 !important;
  font-weight: 800 !important;
}
.kpi-expenses .kpi-icon {
  background: rgba(12,26,46,0.15) !important;
  color: #0c1a2e !important;
  box-shadow: inset 0 2px 4px rgba(12,26,46,0.12) !important;
}
.kpi-expenses .kpi-nav-btn {
  background: rgba(12,26,46,0.12) !important;
  color: #0c1a2e !important;
  font-weight: 700;
}
.kpi-expenses .kpi-nav-btn:hover {
  background: rgba(12,26,46,0.25) !important;
}
.kpi-expenses .kpi-bar {
  background: rgba(12,26,46,0.15) !important;
}
.kpi-expenses .kpi-bar-fill {
  background: rgba(12,26,46,0.45) !important;
}

/* ================================================================
   REPORTS PAGE REDESIGN
   ================================================================ */

/* Staggered Animations */
.stagger-1 { animation: cardReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
.stagger-2 { animation: cardReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; }
.stagger-3 { animation: cardReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }

/* Segmented Navigation (Tabs Replacement) */
.segment-nav {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 999px;
  padding: 0.35rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05), inset 0 2px 4px rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.8);
  gap: 0.25rem;
}
.segment-btn {
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 0.6rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #64748b;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.segment-btn:hover {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.5);
}
.segment-btn.active {
  background: #ffffff;
  color: #6b5bff;
  box-shadow: 0 4px 12px rgba(107, 91, 255, 0.15);
}
/* Individual active colors for a splash of life */
.segment-btn#att-tab.active { color: #6b5bff; } /* Violet */
.segment-btn#pur-tab.active { color: #f97316; } /* Orange */
.segment-btn#inc-tab.active { color: #10b981; } /* Green */
.segment-btn#exp-tab.active { color: #ec4899; } /* Pink */

/* Report Toolbars */
.report-toolbar {
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding-bottom: 1rem;
}
.rt-group {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 999px;
  padding: 0.3rem 0.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.rt-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
  padding: 0 0.5rem;
  white-space: nowrap;
}
.rt-input, .rt-select {
  border: none;
  background: transparent;
  font-size: 0.9rem;
  font-weight: 600;
  color: #334155;
  outline: none;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
}
.date-input { width: 130px; }
.rt-divider {
  width: 1px;
  height: 20px;
  background: #e2e8f0;
  margin: 0 0.25rem;
}
.rt-nav-btn {
  background: #f1f5f9;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
}
.rt-nav-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.rt-btn {
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1.2rem;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.2s;
  cursor: pointer;
}
.rt-btn:active { transform: scale(0.96); }
.rt-btn-primary {
  background: linear-gradient(135deg, #6b5bff 0%, #a25aff 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(107, 91, 255, 0.25);
}
.rt-btn-primary:hover {
  box-shadow: 0 6px 16px rgba(107, 91, 255, 0.35);
  transform: translateY(-1px);
}
.rt-btn-secondary {
  background: white;
  color: #475569;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
.rt-btn-secondary:hover {
  background: #f8fafc;
  color: #0f172a;
}
.rt-btn-outline-danger {
  background: white;
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
.rt-btn-outline-danger:hover {
  background: #fef2f2;
  border-color: #ef4444;
}

/* Ensure the glass card containing the results blends well */
.glass-card .rt-results {
  animation: fadeUp 0.4s ease-out both;
}

@media (max-width: 768px) {
  .rt-group {
    border-radius: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .rt-divider { display: none; }
  .segment-nav { padding: 0.25rem; }
  .segment-btn { padding: 0.5rem 1rem; font-size: 0.85rem; }
}

/* ================================================================
   SETTINGS PAGE REDESIGN
   ================================================================ */
.stagger-4 { animation: cardReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; }
.stagger-5 { animation: cardReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; }
.stagger-6 { animation: cardReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both; }

/* Category Chips */
.category-chip {
  background: white;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 999px;
  padding: 0.25rem 0.5rem 0.25rem 1rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.03);
  transition: all 0.2s ease;
  opacity: 0;
  transform: translateY(10px);
}
.category-chip.enter {
  opacity: 1;
  transform: translateY(0);
}
.category-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  border-color: rgba(107, 91, 255, 0.3);
}

/* Role Permission Cards */
.role-perms-card {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
  transition: transform 0.2s ease;
}
.role-perms-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.05);
}

/* Role Menu Chips (Toggles) */
.role-menu-chip {
  border-radius: 999px !important;
  font-weight: 600 !important;
  padding: 0.4rem 1rem !important;
  transition: all 0.2s ease !important;
}
.role-menu-chip.btn-outline-secondary {
  background: white;
  color: #64748b;
  border-color: #e2e8f0;
}
.role-menu-chip.btn-outline-secondary:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.role-menu-chip.btn-primary {
  background: linear-gradient(135deg, #6b5bff 0%, #a25aff 100%) !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 4px 10px rgba(107, 91, 255, 0.25) !important;
}
.role-menu-chip.btn-primary:active {
  transform: scale(0.95);
}

/* User Roles Select */
.user-role-select {
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background-color: #f8fafc;
  color: #334155;
  font-weight: 600;
  padding: 0.3rem 2rem 0.3rem 0.75rem;
  transition: all 0.2s;
  cursor: pointer;
}
.user-role-select:focus {
  border-color: #6b5bff;
  box-shadow: 0 0 0 3px rgba(107, 91, 255, 0.15);
  background-color: white;
}

/* ================================================================
   SERVICES PAGE MAX-ANIMATED REVAMP
   ================================================================ */

/* Hero Banner */
.services-hero-banner {
  border-radius: 1.5rem;
  padding: 3rem 2rem;
  margin-bottom: 2rem;
  background: linear-gradient(45deg, #ff007f, #7928ca, #ff0055, #ff7a00);
  background-size: 300% 300%;
  animation: heroGradientShift 8s ease infinite;
  box-shadow: 0 20px 50px rgba(121, 40, 202, 0.3);
  position: relative;
  overflow: hidden;
  text-align: center;
  color: white;
}
.expenses-hero-banner {
  background: linear-gradient(45deg, #00c6ff, #0072ff, #00c6ff, #0072ff) !important;
  box-shadow: 0 20px 50px rgba(0, 114, 255, 0.3) !important;
}
.services-hero-banner::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 50%);
  animation: heroGlowSpin 15s linear infinite;
  pointer-events: none;
}
@keyframes heroGradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes heroGlowSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.services-hero-title {
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: -1px;
  text-shadow: 0 4px 15px rgba(0,0,0,0.3);
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
}

/* Floating Action Bar */
.services-action-bar {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50px;
  padding: 0.75rem 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  max-width: 700px;
  margin: 1.5rem auto 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2), inset 0 2px 4px rgba(255,255,255,0.4);
}
.services-search-input {
  background: rgba(255,255,255,0.9) !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 0.6rem 1.5rem !important;
  font-weight: 600;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
}
.btn-magic-new {
  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%) !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 0.6rem 1.5rem !important;
  color: white !important;
  font-weight: 800 !important;
  box-shadow: 0 5px 15px rgba(79,172,254,0.4) !important;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease !important;
  white-space: nowrap;
}
.btn-magic-new:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 10px 25px rgba(79,172,254,0.6), 0 0 0 3px rgba(255,255,255,0.5) !important;
}

/* Magic Service Cards */
.magic-service-card {
  border-radius: 1.5rem;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  color: white;
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 15px 35px rgba(0,0,0,0.15), inset 0 2px 5px rgba(255,255,255,0.3);
  cursor: pointer;
  animation: magicEntry 0.6s cubic-bezier(0.2,0.9,0.2,1) both, floaty 6s ease-in-out infinite;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease, filter 0.4s ease;
  will-change: transform, box-shadow;
}
.magic-service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: inherit;
  filter: blur(20px);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s ease;
}
.magic-service-card:hover {
  transform: translateY(-12px) scale(1.03) rotate(1deg);
  box-shadow: 0 25px 50px rgba(0,0,0,0.3), inset 0 2px 5px rgba(255,255,255,0.5);
  animation-play-state: paused;
  z-index: 10;
}
.magic-service-card:hover::before {
  opacity: 0.8;
}

/* Internal elements */
.magic-card-img {
  width: 70px;
  height: 70px;
  border-radius: 1rem;
  object-fit: cover;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  border: 2px solid rgba(255,255,255,0.5);
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.magic-service-card:hover .magic-card-img {
  transform: scale(1.15) rotate(-5deg);
}

.magic-card-title {
  font-size: 1.3rem;
  font-weight: 900;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  margin-bottom: 0.2rem;
}
.magic-card-desc {
  font-size: 0.85rem;
  opacity: 0.9;
  line-height: 1.3;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.magic-card-badge {
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 8px;
  padding: 0.3rem 0.6rem;
  font-weight: 800;
  font-size: 0.85rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.magic-card-actions {
  display: flex;
  gap: 0.5rem;
}
.magic-card-actions .btn {
  background: rgba(255,255,255,0.2) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  color: white !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  transition: background 0.2s ease !important;
}
.magic-card-actions .btn:hover {
  background: rgba(255,255,255,0.4) !important;
}
.magic-card-actions .drag-handle {
  color: white;
  opacity: 0.6;
  cursor: grab;
}
.magic-card-actions .drag-handle:hover {
  opacity: 1;
}

@keyframes magicEntry {
  from { opacity: 0; transform: translateY(40px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ================================================================
   SERVICES TABLE REVAMP
   ================================================================ */
.magic-table {
  border-collapse: separate;
  border-spacing: 0 15px;
  width: 100%;
  color: #334155;
}
.magic-table thead th {
  border: none;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #64748b;
  padding: 0 1.5rem;
  padding-bottom: 0.5rem;
}
.magic-table tbody tr {
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease, filter 0.4s ease;
  animation: magicEntry 0.5s cubic-bezier(0.2,0.9,0.2,1) both;
  cursor: pointer;
  position: relative;
}
.magic-table tbody tr:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 20px 40px var(--row-color, rgba(0,0,0,0.4));
  z-index: 10;
  filter: brightness(1.1);
}

.magic-table td {
  padding: 1rem 1.5rem;
  vertical-align: middle;
  border-top: 1px solid rgba(255,255,255,0.2);
  border-bottom: 1px solid rgba(255,255,255,0.2);
  color: white !important; /* text is white on the dark gradients */
  background: transparent !important;
  box-shadow: none !important;
}
.magic-table td:first-child {
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
  border-left: 4px solid var(--row-color, rgba(255,255,255,0.5)) !important;
}
.magic-table td:last-child {
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-right: 1px solid rgba(255,255,255,0.2);
}

.magic-table-img {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  border: 2px solid rgba(255,255,255,0.3);
}

.magic-table-title {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 0.2rem;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.magic-table-desc {
  font-size: 0.8rem;
  opacity: 0.85;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 300px;
}

/* ========================================================================= */
/* MAX ANIMATED CORPORATE LOGIN PAGE                                         */
/* ========================================================================= */

.login-page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at 10% 20%, rgb(4, 15, 34) 0%, rgb(16, 37, 66) 90%);
  overflow: hidden;
  z-index: 99999; /* Ensure it covers EVERYTHING including navbar */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mesh Blobs Background */
.mesh-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  z-index: 1;
}

.mesh-blob {
  position: absolute;
  filter: blur(80px);
  opacity: 0.5;
  border-radius: 50%;
  animation: meshFloat 20s infinite alternate ease-in-out;
}

.mesh-blob-1 {
  top: -10%; left: -10%;
  width: 60vw; height: 60vw;
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  animation-duration: 25s;
}

.mesh-blob-2 {
  bottom: -20%; right: -10%;
  width: 50vw; height: 50vw;
  background: linear-gradient(135deg, #ff007f, #7928ca);
  animation-duration: 28s;
  animation-delay: -5s;
}

.mesh-blob-3 {
  top: 40%; left: 30%;
  width: 40vw; height: 40vw;
  background: linear-gradient(135deg, #00f2fe, #4facfe);
  animation-duration: 22s;
  animation-delay: -10s;
}

@keyframes meshFloat {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  33% { transform: translate(10%, -10%) scale(1.1) rotate(45deg); }
  66% { transform: translate(-5%, 15%) scale(0.9) rotate(-30deg); }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}

.login-wrapper {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 450px;
  padding: 2rem;
}

.glass-login-panel {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.5rem;
  padding: 3rem 2.5rem;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.2);
  transform: perspective(1000px) rotateX(0) rotateY(0) translateY(0);
  transition: transform 0.1s ease-out; /* For JS tilt */
}

.glass-login-panel.animate {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
}
.glass-login-panel.enter {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.magic-logo-circle {
  width: 70px;
  height: 70px;
  margin: 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: white;
  box-shadow: 0 10px 25px rgba(0, 114, 255, 0.5);
  animation: pulseLogo 3s infinite;
}

@keyframes pulseLogo {
  0% { box-shadow: 0 0 0 0 rgba(0, 114, 255, 0.7); }
  70% { box-shadow: 0 0 0 15px rgba(0, 114, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 114, 255, 0); }
}

.magic-login-title {
  color: white;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.magic-login-subtitle {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
}

.magic-input-icon {
  position: absolute;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.2rem;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 5;
}

.glass-input {
  background: rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: white !important;
  border-radius: 1rem;
  padding: 1rem 1rem 1rem 3rem !important;
  height: auto !important;
  font-size: 1rem;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.glass-input::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

.glass-input:focus {
  background: rgba(0, 0, 0, 0.4) !important;
  border-color: #00c6ff !important;
  box-shadow: 0 0 20px rgba(0, 198, 255, 0.3), inset 0 2px 4px rgba(0,0,0,0.1) !important;
}

.glass-input:focus + .magic-input-icon,
.glass-input:not(:placeholder-shown) + .magic-input-icon {
  color: #00c6ff;
}

.btn-glass-login {
  background: linear-gradient(45deg, #00c6ff, #0072ff);
  border: none;
  color: white;
  border-radius: 1rem;
  font-size: 1.1rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 114, 255, 0.4);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-glass-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(0, 114, 255, 0.6);
  color: white;
}

.btn-glass-login::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg);
  animation: shimmerBtn 3s infinite;
}

@keyframes shimmerBtn {
  0% { left: -100%; }
  20% { left: 200%; }
  100% { left: 200%; }
}

.magic-forgot-link {
  color: #00c6ff !important;
  transition: all 0.3s ease;
}
.magic-forgot-link:hover {
  color: white !important;
  text-shadow: 0 0 10px #00c6ff;
}

.glass-checkbox {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 0.25rem;
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.2);
  appearance: none;
  outline: none;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
  margin: 0;
}

.glass-checkbox:checked {
  background: #00c6ff;
  border-color: #00c6ff;
}

.glass-checkbox:checked::after {
  content: '\2713';
  position: absolute;
  color: white;
  font-size: 0.9rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ========================================================================= */
/* TRENDY INVOICE LIST (Dashboard)                                           */
/* ========================================================================= */

.trendy-invoice-item {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  z-index: 1;
}

.trendy-invoice-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(0, 198, 255, 0.1), rgba(0, 114, 255, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.trendy-invoice-item:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 25px rgba(0, 114, 255, 0.15);
  border-color: rgba(0, 114, 255, 0.3);
  background: white;
}

.trendy-invoice-item:hover .trendy-invoice-bg {
  opacity: 1;
}

.invoice-customer {
  color: #1e293b;
  font-size: 1.05rem;
  letter-spacing: -0.3px;
}

.invoice-meta {
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 500;
}

.invoice-amount {
  color: #0f172a;
  font-size: 1.15rem;
  background: linear-gradient(135deg, #0072ff, #00c6ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.badge-trendy-paid {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #059669 !important;
  border: 1px solid rgba(16, 185, 129, 0.2);
  font-weight: 700;
  padding: 0.35em 0.65em;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.1);
}

.badge-trendy-unpaid {
  background: rgba(245, 158, 11, 0.1) !important;
  color: #d97706 !important;
  border: 1px solid rgba(245, 158, 11, 0.2);
  font-weight: 700;
  padding: 0.35em 0.65em;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.1);
}


/* ========================================================================= */
/* NEO CORPORATE DASHBOARD — Full Revamp                                     */
/* ========================================================================= */

/* --- NEO HERO BANNER --- */
.neo-dash-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
  padding: 2.5rem 2rem;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.neo-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  pointer-events: none;
}
.neo-hero-orb-1 {
  width: 350px; height: 350px;
  top: -80px; left: -60px;
  background: radial-gradient(circle, #a855f7, transparent 70%);
  animation: orbFloat1 12s ease-in-out infinite alternate;
}
.neo-hero-orb-2 {
  width: 280px; height: 280px;
  bottom: -60px; right: 10%;
  background: radial-gradient(circle, #00f5d4, transparent 70%);
  animation: orbFloat2 15s ease-in-out infinite alternate;
}
.neo-hero-orb-3 {
  width: 220px; height: 220px;
  top: 10%; right: 30%;
  background: radial-gradient(circle, #ec4899, transparent 70%);
  animation: orbFloat1 18s ease-in-out infinite alternate-reverse;
}

.neo-hero-shimmer {
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  animation: heroShimmer 6s linear infinite;
  pointer-events: none;
}

@keyframes heroShimmer { 0%{left:-100%} 100%{left:200%} }
@keyframes orbFloat1 {
  0%{transform:translate(0,0) scale(1);}
  50%{transform:translate(30px,-20px) scale(1.08);}
  100%{transform:translate(-15px,15px) scale(0.95);}
}
@keyframes orbFloat2 {
  0%{transform:translate(0,0) scale(1);}
  50%{transform:translate(-25px,20px) scale(1.1);}
  100%{transform:translate(10px,-10px) scale(0.92);}
}

.neo-hero-content {
  position: relative; z-index: 2;
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 1.5rem;
}

.neo-hero-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: rgba(0,245,212,0.12);
  border: 1px solid rgba(0,245,212,0.35);
  color: #00f5d4;
  padding: 0.3rem 0.85rem;
  border-radius: 50rem; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.5px; margin-bottom: 0.75rem;
  animation: pulseBadge 2.5s ease-in-out infinite;
}
@keyframes pulseBadge {
  0%,100%{box-shadow:0 0 0 0 rgba(0,245,212,0.4);}
  50%{box-shadow:0 0 0 8px rgba(0,245,212,0);}
}

.neo-hero-greeting {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.5px;
  margin: 0 0 0.4rem;
  line-height: 1.2;
}
.neo-hero-name {
  background: linear-gradient(90deg, #00f5d4, #a855f7, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: nameShimmer 4s linear infinite;
  background-size: 200%;
}
@keyframes nameShimmer {
  0%{background-position:0%} 100%{background-position:200%}
}
.neo-hero-sub {
  color: rgba(255,255,255,0.55); font-size: 0.95rem; margin: 0;
}

/* Date filter inside hero */
.neo-date-filter {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 1rem; padding: 0.5rem 0.85rem;
  backdrop-filter: blur(8px);
}
.neo-date-icon { color: rgba(255,255,255,0.5); font-size: 1rem; }
.neo-date-sep { color: rgba(255,255,255,0.4); font-size: 0.9rem; }
.neo-date-input {
  background: transparent; border: none; outline: none;
  color: #fff; font-size: 0.85rem; font-weight: 500;
  width: 120px;
}
.neo-date-input::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }
.neo-date-apply {
  background: linear-gradient(135deg, #00f5d4, #0072ff);
  border: none; color: #000; font-weight: 700;
  font-size: 0.8rem; border-radius: 0.65rem;
  padding: 0.4rem 0.9rem; cursor: pointer;
  transition: all 0.3s ease; white-space: nowrap;
  box-shadow: 0 4px 15px rgba(0,245,212,0.4);
}
.neo-date-apply:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,245,212,0.5); }

/* --- NEO KPI CARDS --- */
.neo-kpi-card {
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, #1a1a2e, #16213e);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 1.25rem;
  padding: 1.4rem 1.4rem 1rem;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.neo-kpi-card:hover {
  transform: translateY(-5px);
  border-color: var(--kpi-accent, #00f5d4);
  box-shadow: 0 20px 50px var(--kpi-glow, rgba(0,245,212,0.3)), 0 0 0 1px var(--kpi-accent, #00f5d4);
}
.neo-kpi-shine {
  position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.neo-kpi-card:hover .neo-kpi-shine { left: 180%; }

.neo-kpi-top {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 1rem;
}
.neo-kpi-icon {
  width: 46px; height: 46px; border-radius: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: #fff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.25);
}
.neo-kpi-trend {
  font-size: 0.75rem; font-weight: 700;
  color: #10b981;
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: 50rem; padding: 0.2rem 0.6rem;
  display: flex; align-items: center; gap: 0.2rem;
}
.neo-kpi-month-nav {
  display: flex; align-items: center; gap: 0.3rem;
}
.neo-kpi-month {
  font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.5);
  min-width: 30px; text-align: center;
}
.neo-nav-btn {
  background: rgba(255,255,255,0.08); border: none; color: rgba(255,255,255,0.6);
  width: 22px; height: 22px; border-radius: 50%; font-size: 0.85rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.neo-nav-btn:hover { background: rgba(255,255,255,0.18); color: #fff; }

.neo-kpi-value {
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  font-weight: 900; color: #fff;
  letter-spacing: -0.5px; line-height: 1;
  margin-bottom: 0.35rem;
}
.neo-kpi-label {
  font-size: 0.8rem; font-weight: 600;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 0.3rem;
}
.neo-kpi-sub {
  font-size: 0.78rem; color: rgba(255,255,255,0.4);
  margin-bottom: 0.6rem;
}
.neo-kpi-sub strong { color: rgba(255,255,255,0.7); }
.neo-kpi-bar {
  height: 3px; background: rgba(255,255,255,0.08);
  border-radius: 50rem; overflow: hidden; margin-top: 0.8rem;
}
.neo-kpi-bar-fill {
  height: 100%; border-radius: 50rem;
  transition: width 1s cubic-bezier(0.4,0,0.2,1);
  animation: barEntrance 1.2s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes barEntrance {
  0%{width:0!important;} 100%{}
}

/* --- NEO GLASS CARD (Chart / Billings) --- */
.neo-glass-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(248,250,252,0.98));
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
}
.neo-glass-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}
.neo-glass-header {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 0.5rem;
}
.neo-glass-title {
  font-size: 1rem; font-weight: 800; color: #0f172a;
  letter-spacing: -0.2px;
}
.neo-glass-sub {
  font-size: 0.8rem; color: #64748b; margin-top: 2px;
}
.neo-expand-hint {
  font-size: 0.75rem; font-weight: 600; color: #6366f1;
  background: rgba(99,102,241,0.08);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 50rem; padding: 0.3rem 0.8rem;
  cursor: pointer; white-space: nowrap;
  transition: all 0.2s;
}
.neo-expand-hint:hover { background: rgba(99,102,241,0.15); }

/* Live badge */
.neo-live-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.75rem; font-weight: 700;
  color: #10b981; background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: 50rem; padding: 0.3rem 0.75rem;
}
.neo-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #10b981;
  animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse {
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:0.5;transform:scale(1.4);}
}

/* Billing rows */
.neo-billing-row {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.75rem; border-radius: 0.85rem;
  margin-bottom: 0.6rem; cursor: pointer;
  background: rgba(0,0,0,0.015);
  border: 1px solid rgba(0,0,0,0.04);
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.neo-billing-row:hover {
  background: rgba(99,102,241,0.06);
  border-color: rgba(99,102,241,0.2);
  transform: translateX(4px);
}
.neo-billing-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #a855f7, #6366f1);
  color: #fff; font-weight: 800; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.neo-billing-info { flex: 1; min-width: 0; }
.neo-billing-name {
  font-size: 0.9rem; font-weight: 700; color: #1e293b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.neo-billing-meta {
  font-size: 0.72rem; color: #94a3b8; margin-top: 2px;
}
.neo-billing-right {
  display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0;
}
.neo-billing-amount {
  font-size: 0.95rem; font-weight: 800; color: #0f172a;
  background: linear-gradient(135deg, #0072ff, #00c6ff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.neo-badge-paid {
  font-size: 0.65rem; font-weight: 700;
  color: #059669; background: rgba(5,150,105,0.1);
  border: 1px solid rgba(5,150,105,0.2);
  border-radius: 50rem; padding: 0.15rem 0.5rem;
  margin-top: 3px;
}
.neo-badge-unpaid {
  font-size: 0.65rem; font-weight: 700;
  color: #d97706; background: rgba(217,119,6,0.1);
  border: 1px solid rgba(217,119,6,0.2);
  border-radius: 50rem; padding: 0.15rem 0.5rem;
  margin-top: 3px;
}
.neo-empty-state {
  text-align: center; padding: 2rem 0;
  color: #94a3b8; font-size: 0.85rem; font-weight: 500;
}

/* --- NEO PANEL CARDS (Attendance / Appointments) --- */
.neo-panel-card {
  background: linear-gradient(145deg, #1a1a2e, #16213e);
  border-radius: 1.25rem;
  border: 1px solid rgba(255,255,255,0.07);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
  cursor: pointer;
}
.neo-panel-card:hover {
  transform: translateY(-3px);
  border-color: var(--panel-accent, #a855f7);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}
.neo-panel-header {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.neo-panel-icon-wrap {
  width: 40px; height: 40px; border-radius: 0.8rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: #fff; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.neo-panel-title {
  font-size: 0.95rem; font-weight: 800; color: #fff;
}
.neo-panel-sub {
  font-size: 0.75rem; color: rgba(255,255,255,0.4); margin-top: 1px;
}
.neo-panel-nav {
  background: rgba(255,255,255,0.08); border: none;
  color: rgba(255,255,255,0.6); font-size: 0.75rem;
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.neo-panel-nav:hover { background: rgba(255,255,255,0.18); color: #fff; }
.neo-panel-date {
  font-size: 0.75rem; font-weight: 600; color: rgba(255,255,255,0.6);
  min-width: 70px; text-align: center;
}
.neo-panel-body {
  padding: 1rem 1.25rem 1.25rem;
  color: rgba(255,255,255,0.75);
  min-height: 80px;
}
/* Ensure existing attendance/appointment list items look good on dark bg */
.neo-panel-body .att-row,
.neo-panel-body .appt-item {
  color: rgba(255,255,255,0.85) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* ========================================================================= */
/* DASHBOARD POLISH — Second Pass                                             */
/* ========================================================================= */

/* Fix stacking context on hero: ensure date filter wraps properly on mobile */
@media (max-width: 767px) {
  .neo-hero-content { flex-direction: column; }
  .neo-date-filter  { flex-wrap: wrap; }
  .neo-date-input   { width: 100px; }
}

/* KPI card entrance animation stagger */
#kpiRow .col-6:nth-child(1) .neo-kpi-card { animation: kpiIn 0.5s 0.05s both; }
#kpiRow .col-6:nth-child(2) .neo-kpi-card { animation: kpiIn 0.5s 0.15s both; }
#kpiRow .col-6:nth-child(3) .neo-kpi-card { animation: kpiIn 0.5s 0.25s both; }
#kpiRow .col-6:nth-child(4) .neo-kpi-card { animation: kpiIn 0.5s 0.35s both; }

@keyframes kpiIn {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Glass card row entrance */
.stagger-4 .neo-glass-card { animation: kpiIn 0.55s 0.45s both; }

/* Attendance & Appointments panels */
.stagger-5 .neo-panel-card { animation: kpiIn 0.6s 0.55s both; }

/* Hero entrance */
.neo-dash-hero { animation: heroIn 0.7s 0s both; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0);     }
}

/* Fix chart card text contrast (chart card has white bg) */
.neo-glass-card .neo-glass-title { color: #0f172a !important; }
.neo-glass-card .neo-glass-sub   { color: #64748b !important; }

/* Neon accent left-border on hover for panel cards */
.neo-panel-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--panel-accent, #a855f7);
  border-radius: 3px 0 0 3px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.neo-panel-card:hover::before { opacity: 1; }

/* Billing row: ensure billing list scrolls if too many items */
.neo-glass-card .mt-3 {
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(99,102,241,0.3) transparent;
}
.neo-glass-card .mt-3::-webkit-scrollbar { width: 4px; }
.neo-glass-card .mt-3::-webkit-scrollbar-thumb {
  background: rgba(99,102,241,0.3); border-radius: 2px;
}

/* Attendance / appointment list items that come from dashboard.js */
.neo-panel-body table { color: rgba(255,255,255,0.85) !important; }
.neo-panel-body .text-muted  { color: rgba(255,255,255,0.45) !important; }
.neo-panel-body .badge       { font-size: 0.7rem !important; }
.neo-panel-body .table-dark,
.neo-panel-body thead th    { background: transparent !important; border-color: rgba(255,255,255,0.08) !important; }
.neo-panel-body tbody tr    { border-color: rgba(255,255,255,0.05) !important; }
.neo-panel-body tbody td    { color: rgba(255,255,255,0.8) !important; }
.neo-panel-body a           { color: #a5b4fc !important; }

/* Fix KPI values — should always be bright white */
.neo-kpi-value { color: #fff !important; }

/* Ensure whole page background stays consistent */
body { background: #f1f5f9; }

/* ========================================================================= */
/* PRO CORPORATE DASHBOARD — Clean & Elegant Revamp                          */
/* ========================================================================= */

.pro-dash-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background: linear-gradient(135deg, #1e3a8a, #312e81);
  padding: 2.5rem 2.5rem;
  box-shadow: 0 10px 25px rgba(30, 58, 138, 0.15);
  color: #fff;
}
.pro-hero-bg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.pro-hero-content {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.5rem;
}
.pro-hero-badge {
  display: inline-flex; align-items: center;
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1px; color: #93c5fd; margin-bottom: 0.5rem;
}
.pro-hero-greeting { font-size: 2rem; font-weight: 700; margin: 0 0 0.5rem; letter-spacing: -0.5px; }
.pro-hero-name { color: #bfdbfe; font-weight: 800; }
.pro-hero-sub { color: #dbeafe; font-size: 1rem; margin: 0; opacity: 0.8; }

.pro-date-filter {
  display: flex; align-items: center; gap: 0.5rem;
  background: #fff; padding: 0.5rem; border-radius: 0.75rem;
}
.pro-date-icon { color: #64748b; padding-left: 0.5rem; }
.pro-date-sep { color: #94a3b8; font-size: 0.8rem; }
.pro-date-input {
  border: none; outline: none; background: transparent;
  color: #1e293b; font-size: 0.9rem; font-weight: 500; width: 110px;
}
.pro-date-apply {
  background: #1e40af; color: #fff; font-size: 0.85rem; font-weight: 600;
  border-radius: 0.5rem; padding: 0.35rem 0.85rem;
}
.pro-date-apply:hover { background: #1e3a8a; color: #fff; }

.pro-kpi-card, .pro-glass-card, .pro-panel-card {
  background: #fff;
  border-radius: 1rem;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
  transition: all 0.3s ease;
  overflow: hidden;
}
.pro-kpi-card:hover, .pro-panel-card:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.08); }

.pro-kpi-card { padding: 1.25rem; }
.pro-kpi-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.pro-kpi-icon {
  width: 42px; height: 42px; border-radius: 0.75rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
}
.pro-kpi-trend { font-size: 0.85rem; font-weight: 600; }
.pro-kpi-month-nav { display: flex; align-items: center; gap: 0.5rem; }
.pro-nav-btn { background: transparent; border: none; color: #64748b; font-size: 1.2rem; cursor: pointer; }
.pro-nav-btn:hover { color: #0f172a; }

.pro-kpi-value { font-size: 1.6rem; font-weight: 700; color: #0f172a; margin-bottom: 0.25rem; }
.pro-kpi-label { font-size: 0.85rem; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.25rem; }
.pro-kpi-sub { font-size: 0.8rem; color: #94a3b8; height: 1.2em; }
.pro-kpi-bar { height: 4px; background: #f1f5f9; border-radius: 4px; margin-top: 1rem; overflow: hidden; }
.pro-kpi-bar-fill { height: 100%; border-radius: 4px; transition: width 1s ease; }

.pro-glass-card { padding: 1.5rem; }
.pro-glass-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.pro-glass-title { font-size: 1.1rem; font-weight: 700; color: #0f172a; }
.pro-glass-sub { font-size: 0.85rem; }
.pro-live-dot { display: inline-block; width: 6px; height: 6px; background: #10b981; border-radius: 50%; margin-right: 4px; animation: pulse 1.5s infinite; }

.pro-billing-list { max-height: 300px; overflow-y: auto; padding-right: 0.5rem; }
.pro-billing-row {
  display: flex; align-items: center; gap: 1rem; padding: 0.75rem;
  border-radius: 0.75rem; border: 1px solid transparent; cursor: pointer;
  transition: all 0.2s;
}
.pro-billing-row:hover { background: #f8fafc; border-color: #e2e8f0; transform: translateX(4px); }
.pro-billing-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.pro-billing-info { flex: 1; }

.pro-panel-header {
  display: flex; align-items: center; gap: 1rem; padding: 1.25rem;
  border-bottom: 1px solid rgba(0,0,0,0.05); background: #f8fafc;
}
.pro-panel-icon {
  width: 36px; height: 36px; border-radius: 0.5rem;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.pro-panel-title { font-size: 1rem; font-weight: 700; color: #0f172a; }
.pro-panel-body { padding: 1.25rem; min-height: 100px; }

/* Override table text colors for the new light panel */
.pro-panel-body table { color: #334155 !important; }
.pro-panel-body .text-muted { color: #64748b !important; }
.pro-panel-body tbody td { color: #1e293b !important; font-weight: 500; }
.pro-panel-body a { color: #2563eb !important; font-weight: 500; }
.pro-panel-body tr { border-bottom-color: #f1f5f9 !important; }

@media (max-width: 767px) {
  .pro-hero-content { flex-direction: column; align-items: flex-start; }
}

/* ========================================================================= */
/* VIBRANT PROFESSIONAL KPI CARDS — High Contrast & Premium Effects          */
/* ========================================================================= */

.pro-kpi-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 1.25rem;
  padding: 1.5rem;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.pro-kpi-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1);
}

/* Glass Shimmer Effect */
.pro-kpi-card::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transform: rotate(45deg);
  transition: 0.6s;
  pointer-events: none;
  opacity: 0;
}

.pro-kpi-card:hover::after {
  left: 100%;
  opacity: 1;
}

.pro-kpi-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: #1e3a8a !important; /* Force dark blue for readability */
  margin-bottom: 0.25rem;
  letter-spacing: -0.02em;
  display: block;
}

.pro-kpi-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.pro-kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.pro-kpi-card:hover .pro-kpi-icon {
  transform: scale(1.1) rotate(5deg);
}

/* Card Specific Vibrant Accents */
.pro-kpi-card[data-href*="billing"] { border-bottom: 4px solid #3b82f6; }
.pro-kpi-card[data-href*="purchases"] { border-bottom: 4px solid #8b5cf6; }
.pro-kpi-card[data-href*="expenses"] { border-bottom: 4px solid #f59e0b; }
.pro-kpi-card[data-href*="reports"] { border-bottom: 4px solid #10b981; }

/* Progress Bars with Glow */
.pro-kpi-bar {
  height: 6px;
  background: #f1f5f9;
  border-radius: 10px;
  margin-top: 1.25rem;
  overflow: hidden;
}

.pro-kpi-bar-fill {
  height: 100%;
  border-radius: 10px;
  box-shadow: 0 0 10px var(--glow-color, rgba(59, 130, 246, 0.5));
}

/* Ensure the text inside Net Income is readable */
#dashNetTotal, #dashBillingMtd {
  color: #1e3a8a !important;
}

/* Trending badge enhancement */
.pro-kpi-trend {
  padding: 0.25rem 0.75rem;
  border-radius: 2rem;
  font-size: 0.75rem;
  font-weight: 800;
  background: rgba(16, 185, 129, 0.1);
}