:root {
	--bg-body: #f6f7fb;
	--bg-surface: #ffffff;
	--bg-surface-alt: #fdfdfd;
	--bg-sidebar: #ffffff;
	--bg-input: #ffffff;
	--text-main: #1f2937;
	--text-muted: #64748b;
	--text-headers: #111827;
	--border-color: #e5e7eb;
	--border-color-alt: #f1f5f9;
	--shadow: 0 2px 10px rgba(0,0,0,0.06);
	--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
	--primary: #3b82f6;
	--primary-light: #eff6ff;
	--sidebar-active: #eff6ff;
}

[data-theme="dark"] {
	--bg-body: #111827;
	--bg-surface: #1f2937;
	--bg-surface-alt: #111827;
	--bg-sidebar: #111827;
	--bg-input: #374151;
	--text-main: #f3f4f6;
	--text-muted: #9ca3af;
	--text-headers: #ffffff;
	--border-color: #374151;
	--border-color-alt: #1f2937;
	--shadow: 0 4px 6px -1px rgba(0,0,0,0.3);
	--shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.4);
	--primary-light: #1e3a8a;
	--sidebar-active: #1e3a8a;
}

body {
	margin: 0;
	font-family: 'Inter', Segoe UI, Arial, sans-serif;
	background: var(--bg-body);
	color: var(--text-main);
	transition: background 0.3s, color 0.3s;
}

.topbar {
	background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
	background-size: 200% 200%;
	animation: gradientShift 10s ease infinite;
	color: #fff;
	padding: 0 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 70px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	z-index: 1000;
	position: sticky;
	top: 0;
	backdrop-filter: blur(10px);
}

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

.topbar .brand {
	display: flex;
	align-items: center;
	gap: 15px;
	cursor: default;
}

.logo-container {
	background: #fff;
	padding: 4px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 15px rgba(255, 255, 255, 0.4), 0 4px 10px rgba(0,0,0,0.2);
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transform: scale(1);
	position: relative;
	z-index: 1;
}

.logo-container::after {
	content: '';
	position: absolute;
	top: -2px; left: -2px; bottom: -2px; right: -2px;
	background: linear-gradient(45deg, #fff, rgba(255,255,255,0.2), #fff);
	border-radius: 50%;
	z-index: -1;
	opacity: 0.5;
	animation: rotate 3s linear infinite;
}

@keyframes rotate {
	100% { transform: rotate(360deg); }
}

.logo-container:hover {
	transform: scale(1.1) rotate(5deg);
	box-shadow: 0 0 25px rgba(255, 255, 255, 0.6), 0 8px 15px rgba(0,0,0,0.3);
}

.brand-logo {
	height: 42px;
	width: 42px;
	object-fit: contain;
	border-radius: 50%;
}

.brand-text {
	font-weight: 850;
	font-size: 24px;
	letter-spacing: -0.5px;
	background: linear-gradient(to right, #fff 20%, #fef3c7 40%, #fff 60%, #fff 80%);
	background-size: 200% auto;
	color: #fff;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: shimmer 4s linear infinite, brandEntrance 0.8s ease-out backwards, float 3s ease-in-out infinite;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

@keyframes float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-3px); }
}

@keyframes shimmer {
	to { background-position: 200% center; }
}

@keyframes brandEntrance {
	from { opacity: 0; transform: translateX(-20px); }
	to { opacity: 1; transform: translateX(0); }
}

.topbar-right {
	display: flex;
	align-items: center;
	gap: 16px
}

.theme-toggle {
	background: rgba(255, 255, 255, 0.2);
	border: none;
	color: #fff;
	font-size: 16px;
	padding: 8px 12px;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.theme-toggle:hover {
	background: rgba(255, 255, 255, 0.3)
}

.user {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	font-size: 14px;
	background: rgba(255, 255, 255, 0.1);
	padding: 8px 16px;
	border-radius: 20px;
}

.user i {
	font-size: 18px;
	opacity: 0.8;
}

.layout {
	display: flex
}

.sidebar {
	width: 300px;
	background: var(--bg-sidebar);
	min-height: calc(100vh - 60px);
	border-right: 1px solid var(--border-color);
	padding: 24px 0;
	transition: background 0.3s, border-color 0.3s;
}

.sidebar ul {
	list-style: none;
	margin: 0;
	padding: 0 15px;
}

.sidebar a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 18px;
	border-radius: 10px;
	color: #475569;
	text-decoration: none;
	font-weight: 500;
	transition: all 0.2s;
	margin-bottom: 5px;
	font-size: 14.5px;
}

.sidebar a:hover {
	background: #f1f5f9;
	color: #3b82f6;
}

.sidebar li a.active {
	background: #eff6ff;
	color: #3b82f6;
	font-weight: 600;
}

.sidebar .submenu {
	padding-left: 20px;
	margin: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out;
}

.sidebar li.has-submenu.open .submenu {
	max-height: 200px;
	margin-bottom: 8px;
}

.sidebar li.has-submenu.open .submenu-arrow i {
	transform: rotate(180deg);
}

.submenu-arrow {
	padding: 5px 8px;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.2s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.submenu-arrow:hover {
	background: rgba(0, 0, 0, 0.05);
}

.submenu-arrow i {
	font-size: 11px;
	transition: transform 0.3s;
	color: #94a3b8;
}

.sidebar .submenu a {
	padding: 9px 18px;
	font-size: 13.5px;
	color: #64748b;
	margin-left: 10px;
	margin-bottom: 2px;
}

.sidebar .submenu a:hover {
	background: #f8fafc;
	color: #3b82f6;
}

.content {
	flex: 1;
	padding: 22px
}

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin-top: 10px
}

.card {
	background: var(--bg-surface);
	border-radius: 12px;
	padding: 18px;
	box-shadow: var(--shadow);
	transition: background 0.3s, box-shadow 0.3s;
}

.login {
	margin: 0;
	padding: 0;
	font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
	background: radial-gradient(circle at top left, #4facfe 0%, transparent 40%),
		radial-gradient(circle at top right, #00f2fe 0%, transparent 40%),
		radial-gradient(circle at bottom left, #7028e4 0%, transparent 40%),
		radial-gradient(circle at bottom right, #e5405e 0%, transparent 40%),
		#3b82f6;
	background-attachment: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}

.login-card {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(25px);
	-webkit-backdrop-filter: blur(25px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 30px;
	padding: 50px 40px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
	width: 100%;
	max-width: 420px;
	color: #fff;
	text-align: center;
}

.login-card form {
	display: grid;
	gap: 0;
}

.profile-icon {
	width: 110px;
	height: 110px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	margin: 0 auto 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid rgba(255, 255, 255, 0.2);
	position: relative;
	overflow: hidden;
}

.profile-icon svg {
	width: 60%;
	height: 60%;
	fill: #fff;
	opacity: 0.9;
}

.login-card h2 {
	margin-bottom: 35px;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 1px;
}

.input-container {
	position: relative;
	margin-bottom: 20px;
}

.input-container i {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: #3b82f6;
	font-size: 18px;
	z-index: 10;
}

.login-card input {
	width: 100%;
	padding: 16px 16px 16px 52px;
	background: #ffffff !important;
	border: none;
	border-radius: 12px;
	font-size: 16px;
	color: #1f2937 !important;
	box-sizing: border-box;
	transition: all 0.3s ease;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.login-card input:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

.login-card input::placeholder {
	color: #9ca3af !important;
}

.login-options {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 25px 0 35px;
	font-size: 14px;
}

.remember-me {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.remember-me input {
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer;
	box-shadow: none !important;
}

.forgot-link {
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	font-weight: 500;
	transition: all 0.3s ease;
}

.forgot-link:hover {
	color: #fff;
	text-decoration: underline;
}

.login-card button[type="submit"] {
	width: 100%;
	padding: 16px;
	border: none;
	border-radius: 12px;
	background: #3b82f6;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.login-card button:not(.btn) {
	width: 100%;
	padding: 16px;
	border: none;
	border-radius: 12px;
	background: #3b82f6;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.login-card button:hover {
	background: #2563eb;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
}

.error {
	background: rgba(239, 68, 68, 0.2);
	border: 1px solid rgba(239, 68, 68, 0.3);
	color: #fee2e2;
	padding: 12px;
	border-radius: 12px;
	margin-bottom: 25px;
	font-size: 14px;
	backdrop-filter: blur(10px);
}

.table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 8px
}

.table th,
.table td {
	background: var(--bg-surface);
	padding: 12px 10px;
	color: var(--text-main);
	border-bottom: 1px solid var(--border-color);
}

.badge {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 999px;
	font-size: 12px
}

.badge.green {
	background: #dcfce7;
	color: #166534
}

.badge.yellow {
	background: #fef9c3;
	color: #854d0e
}

.badge.purple {
	background: #ede9fe;
	color: #5b21b6
}

.badge.red {
	background: #fee2e2;
	color: #991b1b
}

.badge.urgent {
	background: #fef2f2;
	color: #dc2626;
	border: 1px solid #fecaca
}

.badge.warning {
	background: #fef3c7;
	color: #d97706
}

.badge.grace {
	background: #f3e8ff;
	color: #7c3aed
}

.btn {
	display: inline-block;
	background: #3b82f6;
	color: #fff;
	padding: 8px 12px;
	border-radius: 8px;
	text-decoration: none;
	border: 0
}

.btn.red {
	background: #ef4444
}

.btn.gray {
	background: #6b7280
}

input,
select,
textarea {
	background: var(--bg-input);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 8px;
	color: var(--text-main);
	transition: background 0.3s, border-color 0.3s, color 0.3s;
}

label {
	display: grid;
	gap: 6px;
	margin-bottom: 10px
}

/* New License Application layout */
.app-grid {
	display: block
}

.card-block {
	background: var(--bg-surface);
	border-radius: 12px;
	box-shadow: var(--shadow);
	padding: 16px;
	margin-bottom: 16px;
	transition: background 0.3s, box-shadow 0.3s;
}

.card-block h3 {
	margin: 0 0 12px 0
}

.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px
}

.two-col {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 16px
}

.docs-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px
}

.doc-item {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px dashed #e5e7eb;
	border-radius: 10px;
	padding: 12px;
	background: #fafafa
}

.doc-item.small {
	padding: 10px
}

.doc-index {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #ede9fe;
	color: #5b21b6;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600
}

.doc-title {
	font-weight: 600;
	margin-bottom: 6px
}

.side-panel {
	display: grid;
	gap: 16px
}

.fee-box .fee-display {
	font-size: 28px;
	font-weight: 700
}

.actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 12px
}

.btn.submit {
	background: linear-gradient(90deg, #7b2cff, #ff4dc2)
}

@media (max-width: 980px) {
	.grid-3 {
		grid-template-columns: 1fr
	}

	.two-col {
		grid-template-columns: 1fr
	}

	.docs-grid {
		grid-template-columns: 1fr
	}
}

/* License Management styles */
.lm-search {
	display: flex;
	gap: 12px;
	align-items: center;
	background: #fff;
	padding: 12px;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
	margin-bottom: 16px
}

.lm-input {
	flex: 1;
	padding: 10px;
	border: 1px solid #e5e7eb;
	border-radius: 10px
}

.lm-select,
.lm-date {
	padding: 10px;
	border-radius: 10px;
	border: 1px solid #e5e7eb
}

.lm-tabs {
	display: flex;
	gap: 24px;
	border-bottom: 1px solid var(--border-color);
	margin-bottom: 10px
}

.lm-tab {
	background: none;
	border: 0;
	padding: 10px 0;
	cursor: pointer;
	color: #6b21a8
}

.lm-tab.active {
	border-bottom: 3px solid #7b2cff;
	color: var(--text-headers)
}

.lm-panels {
	margin-top: 10px
}

.lm-panel {
	display: none
}

.lm-panel.show {
	display: block
}

.lm-actions {
	white-space: nowrap
}

/* Modal */
.modal {
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	z-index: 40
}

.modal[hidden] {
	display: none
}

.modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .5)
}

.modal-content {
	position: relative;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
	width: min(800px, 92vw);
	max-height: 85vh;
	overflow: auto;
	z-index: 10
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	border-bottom: 1px solid #eee
}

.modal-close {
	background: none;
	border: 0;
	font-size: 22px;
	cursor: pointer
}

.modal-footer {
	position: sticky;
	bottom: 0;
	background: #fff;
	padding: 12px 16px;
	border-top: 1px solid #eee;
	display: flex;
	justify-content: flex-end
}

.btn.submit {
	background: linear-gradient(90deg, #16a34a, #22c55e)
}

.btn.submit:hover {
	filter: brightness(0.98)
}

.details {
	padding: 16px
}

.details .card-block label {
	width: 100%
}

.details .card-block select {
	width: 100%
}

.details .card-block input[type="text"],
.details .card-block input[type="date"] {
	width: 100%
}

.details .actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	flex-wrap: wrap
}

.details #ccList li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 6px 0
}

.checklist-item {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 6px 0
}

.checklist-item input[type="checkbox"] {
	width: 16px;
	height: 16px
}

/* Inspections form compact widths */
.ins-form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
	align-items: end;
	max-width: 880px
}

.ins-form label select,
.ins-form label input {
	width: 100%
}

/* IRM media section improvements */
.irm-media {
	display: grid;
	gap: 10px
}

.irm-location {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap
}

.irm-loc-status {
	color: #6b7280
}

.irm-photos .irm-photo-grid {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 8px
}

.irm-photo {
	display: grid;
	gap: 6px;
	justify-items: start
}

.irm-photo img {
	width: 140px;
	height: 100px;
	object-fit: cover;
	border: 1px solid #e5e7eb;
	border-radius: 8px
}

.irm-progress {
	height: 8px;
	background: #e5e7eb;
	border-radius: 999px;
	overflow: hidden;
	margin-top: 8px
}

.irm-progress #irmProgBar {
	height: 100%;
	width: 0;
	background: #ef4444;
	transition: width .2s ease, background-color .2s ease
}

.irm-progress #irmProgBar.good {
	background: #16a34a
}

.irm-progress #irmProgBar.warn {
	background: #f59e0b
}

.irm-progress #irmProgBar.bad {
	background: #ef4444
}

.doc-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid #f1f1f1
}

.thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin-top: 8px
}

.thumb {
	background: #fafafa;
	border: 1px solid #eee;
	border-radius: 10px;
	padding: 8px;
	text-align: center
}

.thumb img {
	max-width: 100%;
	height: 110px;
	object-fit: cover;
	border-radius: 6px
}

.thumb-caption {
	margin-top: 6px;
	font-size: 12px;
	color: #555
}

.file-badge {
	display: inline-block;
	background: #7b2cff;
	color: #fff;
	border-radius: 8px;
	padding: 10px 14px;
	text-decoration: none
}

/* Business Types */
.doc-input-row {
	display: flex;
	gap: 8px
}

.chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 6px
}

.chip {
	background: #eef2ff;
	color: #3730a3;
	border-radius: 999px;
	padding: 6px 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px
}

.chip-x {
	background: none;
	border: 0;
	cursor: pointer;
	color: #6b21a8;
	font-size: 14px
}

.bt-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	margin-top: 12px
}

.bt-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px
}

.bt-title {
	font-weight: 700
}

.bt-docs {
	display: flex;
	gap: 6px;
	flex-wrap: wrap
}

.bt-footer {
	display: flex;
	align-items: center;
	justify-content: space-between
}

.bt-fee strong {
	font-size: 18px
}

.bt-actions .btn {
	margin-left: 6px
}

/* Business Types table view */
.bt-table-wrap {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
	padding: 12px;
	margin-top: 12px
}

.bt-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 10px
}

.bt-table thead th {
	font-weight: 700;
	color: #374151;
	font-size: 14px;
	text-align: left;
	padding: 8px 12px
}

	.btn-outline-orange {
		background: var(--bg-surface);
		border: 1px solid #f97316;
		color: #f97316;
		padding: 6px 16px;
		border-radius: 6px;
		font-weight: 500;
		cursor: pointer;
		font-size: 14px;
		transition: all 0.2s;
	}

.bt-table tbody td {
	background: #f9fafb;
	border: 1px solid #eef2f7;
	padding: 10px 12px;
	border-radius: 8px
}

.bt-name .name-cell {
	display: flex;
	align-items: center;
	gap: 10px
}

.bt-name .name-pill {
	width: 10px;
	height: 34px;
	border-radius: 6px;
	background: linear-gradient(180deg, #34d399, #10b981)
}

.bt-fee-cell strong {
	font-size: 16px;
	color: #111827
}

.bt-docs-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px
}

.doc-pill {
	background: #e0f2fe;
	color: #075985;
	border-radius: 20px;
	padding: 6px 10px;
	font-size: 12px
}

.doc-empty {
	color: #9ca3af;
	font-size: 13px
}

.bt-index {
	text-align: center
}

.index-pill {
	display: inline-block;
	min-width: 28px;
	height: 28px;
	border-radius: 999px;
	background: #ede9fe;
	color: #5b21b6;
	font-weight: 700;
	line-height: 28px
}

.bt-actions-cell {
	vertical-align: middle
}

.bt-actions-inline {
	display: flex;
	gap: 8px;
	justify-content: flex-end
}

/* Users page layout */
.two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px
}

.two-col>.card-block {
	height: 100%
}


.table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 8px
}

.table th,
.table td {
	background: #fff;
	padding: 12px 10px
}

.badge {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 999px;
	font-size: 12px
}

.badge.green {
	background: #dcfce7;
	color: #166534
}

.badge.yellow {
	background: #fef9c3;
	color: #854d0e
}

.badge.purple {
	background: #ede9fe;
	color: #5b21b6
}

.btn {
	display: inline-block;
	background: #3b82f6;
	color: #fff;
	padding: 8px 12px;
	border-radius: 8px;
	text-decoration: none;
	border: 0
}

.btn.red {
	background: #ef4444
}

.btn.gray {
	background: #6b7280
}

input,
select,
textarea {
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 8px
}

label {
	display: grid;
	gap: 6px;
	margin-bottom: 10px
}

/* Address form enhancements */
.address-section {
	background: #f8fafc;
	border-radius: 12px;
	padding: 20px;
	margin: 16px 0;
	border-left: 4px solid #7b2cff;
}

.address-section h3 {
	color: #1a1a1a;
	margin: 0 0 16px 0;
	font-size: 18px;
	font-weight: 600;
}

.address-section .grid-3 {
	margin-bottom: 12px;
}

.address-section label {
	font-weight: 500;
	color: #374151;
}

.address-section select,
.address-section input {
	border: 2px solid #e5e7eb;
	border-radius: 8px;
	padding: 12px;
	transition: all 0.3s ease;
	background: #fff;
}

.address-section select:focus,
.address-section input:focus {
	outline: none;
	border-color: #e5e7eb;
	box-shadow: none;
}

.address-section select:required:invalid {
	border-color: #e5e7eb;
}

.address-section select:required:valid {
	border-color: #e5e7eb;
}

/* Zone-Woreda relationship indicator */
.zone-woreda-info {
	background: #e0e7ff;
	color: #3730a3;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 12px;
	margin-top: 8px;
	display: none;
}

.zone-woreda-info.show {
	display: block;
}

/* Compulsory Documents Styling */
.compulsory-docs {
	display: flex;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.compulsory-doc-item {
	flex: 1;
	min-width: 120px;
}

.compulsory-doc-btn {
	width: 100%;
	padding: 12px 16px;
	background: #f3f4f6;
	border: 2px solid #d1d5db;
	border-radius: 8px;
	color: #374151;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: center;
}

.compulsory-doc-btn:hover {
	background: #e5e7eb;
	border-color: #9ca3af;
}

.compulsory-doc-btn.selected {
	background: #dbeafe;
	border-color: #3b82f6;
	color: #1e40af;
}

.compulsory-doc-btn:disabled {
	background: #f9fafb;
	border-color: #e5e7eb;
	color: #9ca3af;
	cursor: not-allowed;
}

/* Dark Theme Styles */
[data-theme="dark"] body {
	background: var(--bg-body);
	color: var(--text-main);
}

[data-theme="dark"] .sidebar {
	background: var(--bg-sidebar);
	box-shadow: var(--shadow);
}

[data-theme="dark"] .sidebar a {
	color: var(--text-main);
}

[data-theme="dark"] .sidebar a:hover {
	background: var(--bg-surface);
}

[data-theme="dark"] .card,
[data-theme="dark"] .card-block,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .lm-search,
[data-theme="dark"] .bt-card,
[data-theme="dark"] .bt-table-wrap,
[data-theme="dark"] .modal-footer {
	background: var(--bg-surface);
	color: var(--text-main);
	box-shadow: var(--shadow);
}

[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
	background: var(--bg-surface);
	color: var(--text-main);
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
	background: var(--bg-input) !important;
	border-color: var(--border-color) !important;
	color: var(--text-main) !important;
}

[data-theme="dark"] select option {
	background: var(--bg-surface);
	color: var(--text-main);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
	color: #9ca3af !important;
	opacity: 0.7
}

[data-theme="dark"] .doc-item {
	background: #2d2d2d;
	border-color: #4d4d4d
}

[data-theme="dark"] .lm-input,
[data-theme="dark"] .lm-select,
[data-theme="dark"] .lm-date {
	background: #2d2d2d;
	border-color: #4d4d4d;
	color: #e5e5e5
}

[data-theme="dark"] .lm-tabs {
	border-color: #4d4d4d
}

[data-theme="dark"] .lm-tab {
	color: #a78bfa
}

[data-theme="dark"] .lm-tab.active {
	color: #e5e5e5
}

[data-theme="dark"] .modal-backdrop {
	background: rgba(0, 0, 0, .7)
}

[data-theme="dark"] .doc-row {
	border-color: #4d4d4d
}

[data-theme="dark"] .thumb {
	background: #2d2d2d;
	border-color: #4d4d4d
}

[data-theme="dark"] .activity-item {
	background: #2d2d2d;
	border-color: #4d4d4d
}

[data-theme="dark"] .address-section {
	background: #2d2d2d;
	border-color: #4d4d4d
}

[data-theme="dark"] .address-section input,
[data-theme="dark"] .address-section select {
	background: #3d3d3d;
	border-color: #4d4d4d;
	color: #e5e5e5
}

[data-theme="dark"] .zone-woreda-info {
	background: #3d3d3d;
	color: #a78bfa
}

[data-theme="dark"] .compulsory-doc-btn {
	background: #3d3d3d;
	border-color: #4d4d4d;
	color: #e5e5e5
}

[data-theme="dark"] .compulsory-doc-btn:hover {
	background: #4d4d4d;
	border-color: #5d5d5d
}

[data-theme="dark"] .compulsory-doc-btn.selected {
	background: #4c1d95;
	border-color: #7b2cff;
	color: #e5e5e5
}

/* Dashboard Dark Theme Styles */
[data-theme="dark"] .dashboard-container {
	background: #1a1a1a !important;
	color: #e5e5e5
}

[data-theme="dark"] .dashboard-header h1 {
	color: #e5e5e5 !important
}

[data-theme="dark"] .welcome-text {
	color: #9ca3af !important
}

[data-theme="dark"] .renewal-alerts h3 {
	color: #e5e5e5 !important
}

[data-theme="dark"] .alert-card {
	background: #2d2d2d !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .5)
}

[data-theme="dark"] .alert-urgent {
	background: linear-gradient(135deg, #4c1d1d, #2d2d2d) !important
}

[data-theme="dark"] .alert-warning {
	background: linear-gradient(135deg, #4c3d1d, #2d2d2d) !important
}

[data-theme="dark"] .alert-info {
	background: linear-gradient(135deg, #1d2d4c, #2d2d2d) !important
}

[data-theme="dark"] .alert-grace {
	background: linear-gradient(135deg, #3d2d4c, #2d2d2d) !important
}

[data-theme="dark"] .alert-title,
[data-theme="dark"] .alert-subtitle {
	color: #e5e5e5 !important
}

[data-theme="dark"] .dashboard-card {
	background: #2d2d2d !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .5)
}

[data-theme="dark"] .dashboard-charts {
	background: #2d2d2d !important;
	color: #e5e5e5;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .3)
}

[data-theme="dark"] .chart-container h3 {
	color: #e5e5e5 !important
}

[data-theme="dark"] .dashboard-schedule {
	background: #2d2d2d !important;
	color: #e5e5e5;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .3)
}

[data-theme="dark"] .dashboard-schedule h3 {
	color: #e5e5e5 !important
}

[data-theme="dark"] .activity-item {
	background: #3d3d3d !important;
	border-color: #4d4d4d
}

[data-theme="dark"] .activity-title {
	color: #e5e5e5 !important
}

[data-theme="dark"] .activity-time {
	color: #9ca3af !important
}

[data-theme="dark"] .chart-legend {
	color: #e5e5e5
}

[data-theme="dark"] .legend-item {
	color: #9ca3af
}

/* Reports & Analytics Dark Theme */
[data-theme="dark"] .analytics-page {
	background: #1a1a1a !important;
	color: #e5e5e5
}

[data-theme="dark"] .reports-container {
	background: #1a1a1a !important;
	color: #e5e5e5
}

[data-theme="dark"] .reports-header h1 {
	color: #e5e5e5 !important
}

[data-theme="dark"] .reports-header p {
	color: #9ca3af !important
}

[data-theme="dark"] .analytics-section {
	background: #2d2d2d !important;
	color: #e5e5e5;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .5)
}

[data-theme="dark"] .filters-section {
	background: #2d2d2d !important;
	color: #e5e5e5;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .5)
}

[data-theme="dark"] .analytics-controls {
	background: #2d2d2d
}

[data-theme="dark"] .analytics-controls label {
	color: #e5e5e5
}

[data-theme="dark"] .analytics-controls input[type="date"] {
	background: #3d3d3d !important;
	border-color: #4d4d4d !important;
	color: #e5e5e5 !important
}

[data-theme="dark"] .filters-form input[type="date"],
[data-theme="dark"] .filters-form select {
	background: #3d3d3d !important;
	border-color: #4d4d4d !important;
	color: #e5e5e5 !important
}

[data-theme="dark"] .filters-form select option {
	background: var(--bg-input);
	color: var(--text-main)
}

[data-theme="dark"] .glass-section {
    background: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .dash-tab-btn {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .dash-tab-btn.active {
    background: var(--primary) !important;
    color: #fff !important;
}

[data-theme="dark"] .btn-outline-blue,
[data-theme="dark"] .btn-outline-orange {
    background: var(--bg-input) !important;
    color: var(--text-main) !important;
}

[data-theme="dark"] .zone-woreda-info {
    background: var(--bg-input) !important;
    color: var(--primary) !important;
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .filters-actions .btn.gray {
	background: #4d4d4d !important;
	color: #e5e5e5 !important;
	border-color: #5d5d5d
}

[data-theme="dark"] .filters-actions .btn.gray:hover {
	background: #5d5d5d !important
}

[data-theme="dark"] .photo-item {
	background: #2d2d2d !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .5)
}

[data-theme="dark"] .photo-caption {
	color: #9ca3af !important
}

[data-theme="dark"] .detail-section {
	background: #2d2d2d !important;
	color: #e5e5e5;
	border-color: #4d4d4d
}

[data-theme="dark"] .detail-section h4 {
	color: #e5e5e5 !important
}

[data-theme="dark"] .detail-label {
	color: #9ca3af !important
}

[data-theme="dark"] .detail-value {
	color: #e5e5e5 !important
}

[data-theme="dark"] .result-badge.n_a {
	background: #3d3d3d !important;
	color: #9ca3af
}

[data-theme="dark"] .pending {
	color: #9ca3af
}

[data-theme="dark"] .loading-spinner {
	color: #9ca3af
}

[data-theme="dark"] .analytics-grid {
	color: #e5e5e5
}

[data-theme="dark"] .filters-grid {
	color: #e5e5e5
}

[data-theme="dark"] .inspections-table-section {
	background: #2d2d2d !important;
	color: #e5e5e5;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .5)
}

[data-theme="dark"] .table-header h3 {
	color: #e5e5e5 !important
}

[data-theme="dark"] .inspections-table th {
	background: #3d3d3d !important;
	color: #e5e5e5 !important;
	border-color: #4d4d4d !important
}

[data-theme="dark"] .inspections-table td {
	background: #2d2d2d !important;
	color: #e5e5e5 !important;
	border-color: #4d4d4d !important
}

[data-theme="dark"] .business-name {
	color: #e5e5e5 !important
}

[data-theme="dark"] .application-no {
	color: #9ca3af !important
}

[data-theme="dark"] .table-wrapper {
	color: #e5e5e5
}

/* Business Types Page Dark Theme */
[data-theme="dark"] .bt-table-wrap {
	background: #2d2d2d !important;
	color: #e5e5e5;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .5)
}

[data-theme="dark"] .bt-table thead th {
	background: #3d3d3d !important;
	color: #e5e5e5 !important;
	border-color: #4d4d4d !important
}

[data-theme="dark"] .bt-table tbody td {
	background: #2d2d2d !important;
	color: #e5e5e5 !important;
	border-color: #4d4d4d !important
}

[data-theme="dark"] .bt-name .name-cell span {
	color: #e5e5e5 !important
}

[data-theme="dark"] .bt-fee-cell {
	color: #e5e5e5
}

[data-theme="dark"] .bt-fee-cell strong {
	color: #e5e5e5 !important
}

[data-theme="dark"] .index-pill {
	background: #5b21b6 !important;
	color: #e5e5e5 !important
}

[data-theme="dark"] .doc-pill {
	background: #2563eb !important;
	color: #fff !important;
	opacity: 0.95
}

[data-theme="dark"] .doc-empty {
	color: #9ca3af !important
}

[data-theme="dark"] .chip {
	background: #3d3d3d !important;
	color: #e5e5e5 !important;
	border-color: #4d4d4d
}

[data-theme="dark"] .chip-x {
	color: #e5e5e5 !important
}

[data-theme="dark"] .chip-x:hover {
	color: #fff !important
}

[data-theme="dark"] .name-pill {
	opacity: 0.8
}

[data-theme="dark"] .bt-actions-inline .btn {
	color: #fff !important
}

[data-theme="dark"] .bt-actions-inline .btn.gray {
	background: #4d4d4d !important;
	color: #e5e5e5 !important
}

[data-theme="dark"] .bt-actions-inline .btn.gray:hover {
	background: #5d5d5d !important
}

[data-theme="dark"] .card-block {
	background: #2d2d2d !important;
	color: #e5e5e5 !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .5)
}

[data-theme="dark"] .card-block h3 {
	color: #e5e5e5 !important
}

[data-theme="dark"] .card-block p {
	color: #9ca3af !important
}

[data-theme="dark"] .content h3 {
	color: #e5e5e5 !important
}

/* User Management Page Dark Theme */
[data-theme="dark"] .two-col {
	color: #e5e5e5
}

[data-theme="dark"] .two-col .card-block {
	background: #2d2d2d !important;
	color: #e5e5e5 !important
}

[data-theme="dark"] .table thead th {
	background: #3d3d3d !important;
	color: #e5e5e5 !important;
	border-color: #4d4d4d !important
}

[data-theme="dark"] .table tbody td {
	background: #2d2d2d !important;
	color: #e5e5e5 !important;
	border-color: #4d4d4d !important
}

[data-theme="dark"] ul li {
	background: #2d2d2d !important;
	border-color: #4d4d4d !important;
	color: #e5e5e5 !important
}

[data-theme="dark"] ul li span {
	color: #e5e5e5 !important
}

[data-theme="dark"] input[type="checkbox"] {
	background: var(--bg-input) !important;
	border-color: var(--border-color) !important;
	accent-color: var(--primary);
	width: 18px !important;
	height: 18px !important;
}

[data-theme="dark"] input[type="checkbox"]:checked {
	accent-color: var(--primary);
	background: var(--primary);
}

[data-theme="dark"] input[type="checkbox"]:focus {
	outline: 2px solid #7b2cff;
	outline-offset: 2px
}

/* Override inline styles with more specific selectors */
[data-theme="dark"] div[style*="background: #fef3c7"] {
	background: #4c3d1d !important;
	border-color: #854d0e !important;
	color: #fef9c3 !important
}

[data-theme="dark"] div[style*="background: #fef3c7"] a {
	color: #fef9c3 !important;
	text-decoration: underline
}

[data-theme="dark"] div[style*="background: #fef3c7"] strong {
	color: #fef9c3 !important
}

[data-theme="dark"] li[style*="background:#fff"] {
	background: #2d2d2d !important;
	border-color: #4d4d4d !important;
	color: #e5e5e5 !important
}

[data-theme="dark"] li[style*="background: #fff"] {
	background: #2d2d2d !important;
	border-color: #4d4d4d !important;
	color: #e5e5e5 !important
}

[data-theme="dark"] li[style*="border:1px solid #eee"] {
	border-color: #4d4d4d !important
}

[data-theme="dark"] .actions {
	color: #e5e5e5
}

[data-theme="dark"] .actions .btn {
	color: #fff !important
}

/* Content Area Dark Theme */
[data-theme="dark"] .content {
	background: var(--bg-body);
	color: var(--text-main);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
	color: var(--text-headers) !important;
}

[data-theme="dark"] p {
	color: #e5e5e5
}

[data-theme="dark"] label {
	color: #e5e5e5
}

[data-theme="dark"] .error {
	background: #4c1d1d !important;
	color: #fee2e2;
	border-color: #7f1d1d
}

[data-theme="dark"] .success {
	color: #86efac
}

[data-theme="dark"] .badge {
	color: #e5e5e5
}

[data-theme="dark"] .badge.green {
	background: #166534 !important;
	color: #dcfce7
}

[data-theme="dark"] .badge.yellow {
	background: #854d0e !important;
	color: #fef9c3
}

[data-theme="dark"] .badge.purple {
	background: #5b21b6 !important;
	color: #ede9fe
}

[data-theme="dark"] .badge.red {
	background: #991b1b !important;
	color: #fee2e2
}

[data-theme="dark"] .badge.urgent {
	background: #991b1b !important;
	color: #fee2e2;
	border-color: #dc2626
}

[data-theme="dark"] .badge.warning {
	background: #854d0e !important;
	color: #fef3c7
}

[data-theme="dark"] .badge.grace {
	background: #7c3aed !important;
	color: #f3e8ff
}

[data-theme="dark"] .status-badge {
	color: #e5e5e5
}

[data-theme="dark"] .status-badge.approved {
	background: #166534 !important;
	color: #dcfce7
}

[data-theme="dark"] .status-badge.pending {
	background: #1e40af !important;
	color: #dbeafe
}

[data-theme="dark"] .status-badge.success {
	background: #166534 !important;
	color: #dcfce7
}

[data-theme="dark"] .btn.gray {
	background: #4d4d4d !important;
	color: #e5e5e5 !important;
	border-color: #5d5d5d
}

[data-theme="dark"] .btn.gray:hover {
	background: #5d5d5d !important
}

[data-theme="dark"] button.gray {
	background: #4d4d4d !important;
	color: #e5e5e5 !important;
	border-color: #5d5d5d
}

[data-theme="dark"] button.gray:hover {
	background: #5d5d5d !important
}

/* Ensure all input and select elements in forms have dark theme */
[data-theme="dark"] form input,
[data-theme="dark"] form select,
[data-theme="dark"] form textarea {
	background: #3d3d3d !important;
	border-color: #4d4d4d !important;
	color: #e5e5e5 !important
}

[data-theme="dark"] .analytics-section input,
[data-theme="dark"] .analytics-section select,
[data-theme="dark"] .filters-section input,
[data-theme="dark"] .filters-section select {
	background: #3d3d3d !important;
	border-color: #4d4d4d !important;
	color: #e5e5e5 !important
}