/* =========================================================================
   Premium Dark Glassmorphism Global Theme
   ========================================================================= */

/* 1. Global Reset & Body */
body, html, #app {
	font-family: 'Outfit', 'Poppins', sans-serif !important;
	background: radial-gradient(circle at 50% 0%, #1a1d2d 0%, #0b0c10 100%) !important;
	color: #e2e8f0 !important;
	min-height: 100vh;
}

/* Auth Pages Full Screen Fix */
body.body-full .main-container {
	background: transparent !important;
}

.main-container, .content-container, #content, .page {
	background: transparent !important;
}

/* 2. Glassmorphic Panels & Cards */
.panel, .well, .jumbotron, .auth-container {
	background: rgba(21, 24, 33, 0.75) !important;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 18px !important;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.panel:hover, .auth-container:hover {
	border-color: rgba(0, 240, 255, 0.3) !important;
	box-shadow: 0 20px 50px rgba(0, 240, 255, 0.15) !important;
	transform: translateY(-2px);
}

.panel-heading {
	background: rgba(255, 255, 255, 0.03) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
	color: #00f0ff !important;
	font-weight: 600 !important;
	border-top-left-radius: 16px !important;
	border-top-right-radius: 16px !important;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	font-size: 13px;
	padding: 15px 20px !important;
}

.panel-body {
	padding: 20px !important;
}

/* 3. Dashboard Head Welcome Box */
.dash-head {
	background: rgba(21, 24, 33, 0.7) !important;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 16px !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
	margin-top: 15px !important;
	margin-bottom: 20px !important;
	padding: 20px !important;
}

.dash-head h3, .dash-head h4, .auth-container h1, .auth-container h5 {
	font-weight: 700;
	letter-spacing: -0.5px;
	color: #ffffff !important;
}

.dash-head p, .auth-container h5 {
	color: #94a3b8 !important;
}

/* 4. Navigation & Sidebar */
.site-head {
	background: rgba(11, 12, 16, 0.85) !important;
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.nav-wrap {
	background: rgba(11, 12, 16, 0.96) !important;
	border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.nav-head {
	background: transparent !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
	box-shadow: none !important;
}

.nav-head .site-logo {
	color: #00f0ff !important;
}

.site-nav .nav-list li.active a, .site-nav .nav-list li.open > a {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.15), rgba(0, 114, 255, 0.1)) !important;
	border-left: 4px solid #00f0ff !important;
	color: #00f0ff !important;
	font-weight: 500;
}

.site-nav .nav-list li a {
	color: #94a3b8 !important;
}

.site-nav .nav-list li a:hover {
	color: #00f0ff !important;
	background: rgba(255, 255, 255, 0.03) !important;
}

.site-nav .nav-list li .inner-drop {
	background: rgba(17, 19, 26, 0.95) !important;
	border-left: 3px solid rgba(0, 240, 255, 0.4) !important;
}

.site-nav .nav-list li .inner-drop a {
	color: #cbd5e1 !important;
	background: transparent !important;
}

.site-nav .nav-list li .inner-drop a:hover {
	color: #00f0ff !important;
	background: rgba(255, 255, 255, 0.04) !important;
}

.site-nav .profile .group {
	color: #cbd5e1 !important;
}

.site-nav .profile .group .dropdown {
	color: #00f0ff !important;
}

.site-nav .profile .group .desig {
	color: #94a3b8 !important;
}

.nav-foot {
	background: transparent !important;
	border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
	box-shadow: none !important;
}

.nav-foot p, .nav-foot p span {
	color: #64748b !important;
}

/* 5. Buttons Premium Styling */
.btn {
	border-radius: 10px !important;
	font-weight: 600 !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	text-transform: uppercase;
	font-size: 12px !important;
	letter-spacing: 0.5px !important;
	padding: 8px 18px !important;
}

.btn-primary, .btn-info {
	background: linear-gradient(135deg, #00c6ff, #0072ff) !important;
	border: none !important;
	box-shadow: 0 6px 16px rgba(0, 114, 255, 0.3) !important;
	color: #ffffff !important;
}

.btn-primary:hover, .btn-info:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 25px rgba(0, 114, 255, 0.5) !important;
	filter: brightness(1.15);
}

.btn-success {
	background: linear-gradient(135deg, #10b981, #059669) !important;
	border: none !important;
	box-shadow: 0 6px 16px rgba(16, 185, 129, 0.25) !important;
	color: #ffffff !important;
}

.btn-success:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 25px rgba(16, 185, 129, 0.45) !important;
	filter: brightness(1.15);
}

.btn-danger {
	background: linear-gradient(135deg, #ef4444, #dc2626) !important;
	border: none !important;
	box-shadow: 0 6px 16px rgba(239, 68, 68, 0.25) !important;
	color: #ffffff !important;
}

.btn-danger:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 25px rgba(239, 68, 68, 0.45) !important;
	filter: brightness(1.15);
}

.btn-default {
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: #cbd5e1 !important;
	box-shadow: none !important;
}

.btn-default:hover,
.btn.btn-default:hover,
.btn-default:focus,
.btn.btn-default:focus,
.btn-default:active,
.btn.btn-default:active {
	background: rgba(255, 255, 255, 0.15) !important;
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.3) !important;
}

/* 6. Form Inputs */
.form-control, select, textarea, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"] {
	background: rgba(11, 12, 16, 0.6) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 10px !important;
	color: #f8fafc !important;
	box-shadow: none !important;
	transition: all 0.25s ease !important;
	height: auto !important;
	padding: 10px 16px !important;
}

.form-control:focus, select:focus, textarea:focus, input:focus {
	border-color: #00f0ff !important;
	background: rgba(11, 12, 16, 0.85) !important;
	box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.2) !important;
	outline: none !important;
}

.control-label, label {
	color: #cbd5e1 !important;
	font-weight: 500 !important;
	margin-bottom: 8px !important;
	letter-spacing: 0.2px;
}

.help-block {
	color: #94a3b8 !important;
}

.input-group-addon {
	background: rgba(11, 12, 16, 0.7) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-right: none !important;
	color: #00f0ff !important;
	border-top-left-radius: 10px !important;
	border-bottom-left-radius: 10px !important;
}

.input-group .form-control {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

/* Material Design inputs overrides for login/auth */
.md-input {
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
	border-radius: 0 !important;
	padding: 8px 0 !important;
	color: #ffffff !important;
}

.md-input:focus {
	border-bottom-color: #00f0ff !important;
	box-shadow: 0 1px 0 0 #00f0ff !important;
	background: transparent !important;
}

.md-float-label label {
	color: #94a3b8 !important;
}

/* 7. Badges */
.label-success, .badge-success {
	background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.3)) !important;
	color: #34d399 !important;
	border: 1px solid rgba(16, 185, 129, 0.4) !important;
	padding: 5px 12px !important;
	font-weight: 700 !important;
	border-radius: 6px !important;
	text-transform: uppercase;
	font-size: 11px;
}

.label-warning, .badge-warning {
	background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.3)) !important;
	color: #fbbf24 !important;
	border: 1px solid rgba(245, 158, 11, 0.4) !important;
	padding: 5px 12px !important;
	font-weight: 700 !important;
	border-radius: 6px !important;
	text-transform: uppercase;
	font-size: 11px;
}

.label-danger, .badge-danger {
	background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.3)) !important;
	color: #fca5a5 !important;
	border: 1px solid rgba(239, 68, 68, 0.4) !important;
	padding: 5px 12px !important;
	font-weight: 700 !important;
	border-radius: 6px !important;
	text-transform: uppercase;
	font-size: 11px;
}

/* 8. Modern Table / Cards */
.table {
	border-radius: 12px !important;
	overflow: hidden !important;
	border: 1px solid rgba(255, 255, 255, 0.05) !important;
	background: transparent !important;
}

.table th {
	background: rgba(255, 255, 255, 0.03) !important;
	color: #00f0ff !important;
	font-weight: 600 !important;
	border: none !important;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.5px;
	padding: 14px 15px !important;
}

.table td {
	background: transparent !important;
	color: #cbd5e1 !important;
	border-color: rgba(255, 255, 255, 0.04) !important;
	padding: 14px 15px !important;
	vertical-align: middle !important;
}

.table-striped tbody tr:nth-of-type(odd) {
	background: rgba(255, 255, 255, 0.02) !important;
}

.table-striped tbody tr:hover {
	background: rgba(0, 240, 255, 0.05) !important;
}

/* Dynamic Card Lists (for Customers, Vouchers, etc.) */
.modern-table {
	border: none !important;
}
.modern-table thead {
	display: none !important; 
}
.modern-table tbody tr, .modern-table tbody tr:hover {
	background: transparent !important;
}
.modern-table tbody td {
	border: none !important;
	padding: 0 0 15px 0 !important;
}

.card-item {
	background-color: rgba(21, 24, 33, 0.7) !important;
	backdrop-filter: blur(16px) !important;
	-webkit-backdrop-filter: blur(16px) !important;
	border: 1px solid rgba(255, 255, 255, 0.07) !important;
	border-radius: 18px !important;
	padding: 24px !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	display: block !important;
}

.card-item:hover {
	border-color: rgba(0, 240, 255, 0.3) !important;
	box-shadow: 0 16px 40px rgba(0, 240, 255, 0.15) !important;
	transform: translateY(-3px) !important;
}

.card-title {
	font-size: 18px !important;
	font-weight: 700 !important;
	margin-bottom: 18px !important;
	color: #ffffff !important;
	border-bottom: 2px solid rgba(0, 240, 255, 0.4) !important;
	padding-bottom: 10px !important;
	display: inline-block !important;
	letter-spacing: -0.2px !important;
}

.card-info {
	margin-bottom: 12px !important;
	font-size: 14px !important;
	color: #cbd5e1 !important;
	display: flex !important;
	align-items: center !important;
}

.card-info i {
	color: #00f0ff !important;
	margin-right: 12px !important;
	font-size: 15px !important;
	width: 20px !important;
	text-align: center !important;
}

.card-actions {
	margin-top: 20px !important;
	border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
	padding-top: 16px !important;
	text-align: right !important;
}

.text-label {
	color: #94a3b8 !important;
	font-weight: 600 !important;
	margin-right: 5px !important;
}

/* 9. Pagination */
.pagination > li > a, .pagination > li > span {
	background: rgba(255, 255, 255, 0.05) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	color: #cbd5e1 !important;
	margin: 0 3px !important;
	border-radius: 8px !important;
	transition: all 0.2s !important;
}

.pagination > li > a:hover, .pagination > li > a:focus {
	background: rgba(0, 240, 255, 0.2) !important;
	color: #00f0ff !important;
	border-color: #00f0ff !important;
}

.pagination > .active > a, .pagination > .active > span {
	background: linear-gradient(135deg, #00c6ff, #0072ff) !important;
	color: #ffffff !important;
	border-color: transparent !important;
	font-weight: 700 !important;
	box-shadow: 0 4px 10px rgba(0, 114, 255, 0.4) !important;
}

/* 10. Select2 Dropdowns */
.select2-container--default .select2-selection--single {
	background: rgba(11, 12, 16, 0.6) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 10px !important;
	height: auto !important;
	padding: 8px 14px !important;
	transition: all 0.25s ease !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: #f8fafc !important;
	line-height: normal !important;
	padding-left: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100% !important;
	top: 0 !important;
	right: 12px !important;
}

.select2-dropdown {
	background: rgba(21, 24, 33, 0.96) !important;
	backdrop-filter: blur(20px) !important;
	-webkit-backdrop-filter: blur(20px) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 14px !important;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6) !important;
	overflow: hidden !important;
	margin-top: 6px !important;
}

.select2-search--dropdown .select2-search__field {
	background: rgba(11, 12, 16, 0.8) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 8px !important;
	color: #f8fafc !important;
	padding: 8px 12px !important;
}

.select2-search--dropdown .select2-search__field:focus {
	border-color: #00f0ff !important;
	box-shadow: 0 0 0 2px rgba(0, 240, 255, 0.2) !important;
}

.select2-results__option {
	padding: 10px 16px !important;
	color: #cbd5e1 !important;
	font-size: 14px !important;
	transition: all 0.15s ease !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
	background-color: rgba(255, 255, 255, 0.08) !important;
	color: #00f0ff !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.25), rgba(0, 114, 255, 0.15)) !important;
	color: #00f0ff !important;
	font-weight: 500 !important;
}

/* 11. Custom Alerts */
.alert {
	border-radius: 12px !important;
	border: 1px solid transparent !important;
	padding: 15px 20px !important;
	box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}
.alert-info {
	background: rgba(59, 130, 246, 0.15) !important;
	border-color: rgba(59, 130, 246, 0.3) !important;
	color: #93c5fd !important;
}
.alert-danger {
	background: rgba(239, 68, 68, 0.15) !important;
	border-color: rgba(239, 68, 68, 0.3) !important;
	color: #fca5a5 !important;
}
.alert-success {
	background: rgba(16, 185, 129, 0.15) !important;
	border-color: rgba(16, 185, 129, 0.3) !important;
	color: #6ee7b7 !important;
}

/* 12. Toasts */
#toast-container {
	position: fixed;
	top: 24px;
	right: 24px;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 380px;
	width: calc(100% - 48px);
	pointer-events: none;
}
.wisp-toast {
	background: rgba(21, 24, 33, 0.98) !important;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	color: #f8fafc !important;
	padding: 16px 20px 12px;
	border-radius: 16px;
	box-shadow: 0 20px 40px -8px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08);
	font-size: 14px;
	font-family: 'Outfit', 'Poppins', sans-serif;
	font-weight: 500;
	display: flex;
	flex-direction: column;
	gap: 0;
	transform: translateX(120%);
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
	opacity: 0;
	pointer-events: auto;
	border-left: 5px solid #4b5563;
	overflow: hidden;
	min-width: 300px;
}
.wisp-toast.toast-success { border-left-color: #10b981 !important; }
.wisp-toast.toast-error   { border-left-color: #ef4444 !important; }
.wisp-toast.toast-info    { border-left-color: #3b82f6 !important; }
.wisp-toast.show {
	transform: translateX(0);
	opacity: 1;
}
.wisp-toast-body {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 12px;
}
.wisp-toast-icon { font-size: 20px; flex-shrink: 0; }
.wisp-toast-icon.success { color: #10b981; }
.wisp-toast-icon.error   { color: #ef4444; }
.wisp-toast-icon.info    { color: #60a5fa; }
.wisp-toast-content { flex: 1; line-height: 1.5; }
.wisp-toast-close {
	border: none; background: transparent;
	font-size: 20px; cursor: pointer;
	color: #64748b; padding: 0; line-height: 1;
	display: flex; align-items: center;
	transition: color 0.2s; flex-shrink: 0;
}
.wisp-toast-close:hover { color: #f1f5f9; }
.wisp-toast-progress {
	height: 3px;
	border-radius: 0 0 2px 2px;
	background: rgba(255,255,255,0.1);
	margin: 0 -20px -12px;
	position: relative;
	overflow: hidden;
}
.wisp-toast-progress-bar {
	height: 100%;
	width: 100%;
	border-radius: inherit;
	transform-origin: left;
}
.toast-success .wisp-toast-progress-bar { background: #10b981; }
.toast-error   .wisp-toast-progress-bar { background: #ef4444; }
.toast-info    .wisp-toast-progress-bar { background: #60a5fa; }

/* 13. Reports (Daily/Period) & Invoices styling */
.page-invoice .invoice-wrap {
	background: rgba(21, 24, 33, 0.75) !important;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 18px !important;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
	color: #cbd5e1 !important;
}

.page-invoice .invoice-wrap .invoice-head {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
	margin-bottom: 25px !important;
	padding-bottom: 15px !important;
}

.page-invoice .invoice-wrap .brand-logo,
.page-invoice .invoice-wrap h3 {
	color: #00f0ff !important;
	font-weight: 700 !important;
	letter-spacing: -0.5px;
}

.page-invoice .invoice-wrap .address-wrap {
	background: rgba(255, 255, 255, 0.02) !important;
	border: 1px solid rgba(255, 255, 255, 0.06) !important;
	border-radius: 12px !important;
	overflow: hidden;
}

.page-invoice .invoice-wrap .address-wrap .address-title {
	border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
	background: rgba(255, 255, 255, 0.02) !important;
	font-weight: 600;
	color: #ffffff !important;
}

.page-invoice .invoice-wrap .invoice-table {
	border: 1px solid rgba(255, 255, 255, 0.05) !important;
	background: transparent !important;
	border-radius: 12px !important;
}

.page-invoice .invoice-wrap .invoice-table thead tr {
	background: rgba(255, 255, 255, 0.03) !important;
}

.page-invoice .invoice-wrap .invoice-table thead tr th {
	color: #00f0ff !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.5px;
	padding: 14px 15px !important;
}

.page-invoice .invoice-wrap .invoice-table tbody tr td {
	color: #cbd5e1 !important;
	border-color: rgba(255, 255, 255, 0.04) !important;
	padding: 14px 15px !important;
}

.page-invoice .invoice-wrap .total-sum {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
	padding-bottom: 15px !important;
}

.page-invoice .invoice-wrap .total-sum h4 {
	color: #94a3b8 !important;
	font-weight: 600 !important;
}

.page-invoice .invoice-wrap .total-sum .sum {
	color: #10b981 !important; /* Green tone for earnings */
	font-weight: 700 !important;
	text-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.page-invoice .invoice-wrap p.text-info {
	color: #00f0ff !important;
	font-weight: 500;
}

/* 14. Datepicker Dark Premium Theme Overrides */
.datepicker {
	background: rgba(21, 24, 33, 0.98) !important;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 14px !important;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6) !important;
	color: #f8fafc !important;
	padding: 10px !important;
}

.datepicker table {
	background: transparent !important;
}

.datepicker table tr td, 
.datepicker table tr th {
	color: #cbd5e1 !important;
	border-radius: 8px !important;
	transition: all 0.2s ease;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.focused {
	background: rgba(0, 240, 255, 0.15) !important;
	color: #00f0ff !important;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover {
	background: linear-gradient(135deg, #00c6ff, #0072ff) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 10px rgba(0, 114, 255, 0.4) !important;
}

.datepicker table tr td.old,
.datepicker table tr td.new {
	color: #64748b !important;
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
	color: #4b5563 !important;
	background: transparent !important;
}

.datepicker-dropdown:after {
	border-bottom-color: rgba(21, 24, 33, 0.98) !important;
}

.datepicker-dropdown:before {
	border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}