/* Shared mobile / tablet styles — Employee Portal */

.portal-home-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	border-radius: 8px;
	padding: 2px 4px;
	text-decoration: none;
	transition: background 0.15s;
	gap: 0;
}

.portal-home-logo:hover {
	background: #f1f5f9;
}

.portal-home-logo img,
img.portal-logo {
	height: 48px;
	width: auto;
	max-width: 168px;
	object-fit: contain;
	display: block;
}

/* Light / dark logo pair */
.portal-logo-dark {
	display: none !important;
}

html[data-theme="dark"] .portal-logo-light {
	display: none !important;
}

html[data-theme="dark"] .portal-logo-dark {
	display: block !important;
}

.portal-home-logo.portal-home-logo-lg img {
	height: 88px;
	max-width: 240px;
}

.portal-home-logo.portal-home-logo-hero img {
	height: auto;
	width: min(280px, 80vw);
	max-width: 280px;
	object-fit: contain;
}

.portal-home-logo.portal-home-logo-center {
	margin-bottom: 24px;
}

.portal-home-logo-sep {
	color: #cbd5e1;
	font-size: 14px;
	flex-shrink: 0;
}

@media (max-width: 639px) {
	.portal-home-logo-sep {
		display: none;
	}

	.portal-home-logo:not(.portal-home-logo-lg):not(.portal-home-logo-hero) img {
		height: 40px;
		max-width: 140px;
	}

	.portal-home-logo.portal-home-logo-hero img {
		width: min(220px, 72vw);
		max-width: 220px;
	}

	.portal-home-logo-bar-label {
		display: none;
	}
}

.portal-home-logo-bar {
	position: sticky;
	top: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 14px;
	background: #fff;
	border-bottom: 1px solid #e2e8f0;
	box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}

.portal-home-logo-bar-label {
	font-size: 12px;
	font-weight: 600;
	color: #64748b;
	letter-spacing: 0.02em;
}

html {
	-webkit-text-size-adjust: 100%;
}

body.portal-responsive {
	overflow-x: hidden;
}

.portal-tbl-wrap,
.iot-tbl-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.portal-scroll-hint,
.iot-tbl-scroll-hint {
	display: none;
	padding: 6px 12px;
	font-size: 10px;
	color: #94a3b8;
	text-align: center;
	background: #f8fafc;
	border-bottom: 1px solid #f1f5f9;
}

.portal-tbl,
.iot-tbl,
table.portal-tbl-auto {
	width: 100%;
	font-size: 11px;
	line-height: 1.35;
	border-collapse: collapse;
}

.portal-tbl th,
.portal-tbl td,
.iot-tbl th,
.iot-tbl td,
table.portal-tbl-auto th,
table.portal-tbl-auto td {
	padding: 5px 6px;
	vertical-align: top;
	border-bottom: 1px solid #f1f5f9;
}

.portal-tbl thead th,
.iot-tbl thead th,
table.portal-tbl-auto thead th {
	background: #f8fafc;
	color: #64748b;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.portal-tbl tbody tr:hover,
.iot-tbl tbody tr:hover,
table.portal-tbl-auto tbody tr:hover {
	background: #f8fafc;
}

.portal-tbl .c-num,
.iot-tbl .c-num {
	width: 28px;
	text-align: center;
	color: #94a3b8;
}

.portal-tbl .c-center,
.iot-tbl .c-center {
	text-align: center;
}

.portal-tbl .c-nowrap,
.iot-tbl .c-nowrap {
	white-space: nowrap;
}

.portal-tbl .c-wrap,
.iot-tbl .c-wrap {
	word-break: break-word;
	max-width: 120px;
}

.portal-tbl .c-wrap-lg,
.iot-tbl .c-wrap-lg {
	word-break: break-word;
	max-width: 180px;
}

.portal-panel-head,
.iot-panel-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.portal-panel-head h2,
.iot-panel-head h2 {
	font-size: 0.95rem;
	line-height: 1.35;
}

/* Legacy CRM / wide layout tables */
table.portal-legacy-responsive {
	max-width: 100%;
}

table.portal-legacy-responsive img {
	max-width: 100%;
	height: auto;
}

.portal-filter-row select,
.portal-filter-row input[type="submit"],
.portal-filter-row button {
	min-height: 40px;
	font-size: 14px;
}

/* Touch-friendly controls */
@media (max-width: 1023.98px) {
	.portal-scroll-hint,
	.iot-tbl-scroll-hint {
		display: block;
	}

	.nav-item {
		min-height: 44px;
		padding: 11px 14px;
	}

	#app-sidebar {
		width: min(85vw, 18rem);
	}

	.portal-topbar-compact {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	.portal-hide-tablet {
		display: none !important;
	}
}

@media (max-width: 767.98px) {
	.portal-scroll-hint,
	.iot-tbl-scroll-hint {
		display: none;
	}

	.portal-tbl-wrap,
	.iot-tbl-wrap {
		overflow: visible;
		padding: 0 10px 12px;
	}

	.portal-hide-mobile {
		display: none !important;
	}

	.portal-show-mobile-inline {
		display: inline !important;
	}

	/* Standard tables with thead */
	.portal-tbl thead,
	.iot-tbl thead,
	table.portal-tbl-auto thead {
		display: none;
	}

	.portal-tbl tbody tr,
	.iot-tbl tbody tr,
	table.portal-tbl-auto:not(.portal-legacy-layout) tbody tr {
		display: block;
		margin-bottom: 10px;
		border: 1px solid #e2e8f0;
		border-radius: 10px;
		overflow: hidden;
		background: #fff;
		box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	}

	.portal-tbl tbody tr.bg-red-50,
	.iot-tbl tbody tr.bg-red-50 {
		background: #fef2f2;
		border-color: #fecaca;
	}

	.portal-tbl tbody tr:hover,
	.iot-tbl tbody tr:hover,
	table.portal-tbl-auto:not(.portal-legacy-layout) tbody tr:hover {
		background: #fff;
	}

	.portal-tbl td,
	.iot-tbl td,
	table.portal-tbl-auto:not(.portal-legacy-layout) td {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 10px;
		padding: 8px 12px;
		border-bottom: 1px solid #f1f5f9;
		max-width: none !important;
		white-space: normal !important;
		text-align: right !important;
	}

	.portal-tbl td:last-child,
	.iot-tbl td:last-child,
	table.portal-tbl-auto:not(.portal-legacy-layout) td:last-child {
		border-bottom: none;
	}

	.portal-tbl td::before,
	.iot-tbl td::before,
	table.portal-tbl-auto:not(.portal-legacy-layout) td::before {
		content: attr(data-label);
		font-weight: 600;
		color: #64748b;
		font-size: 10px;
		text-align: left;
		flex: 0 0 44%;
		max-width: 44%;
		word-break: break-word;
		padding-right: 6px;
	}

	.portal-tbl td > *,
	.iot-tbl td > *,
	table.portal-tbl-auto:not(.portal-legacy-layout) td > * {
		text-align: right;
	}

	.portal-panel-head h2,
	.iot-panel-head h2 {
		font-size: 0.875rem;
	}

	/* CRM-style single table with banner + filters + data rows */
	table.portal-legacy-layout,
	table.portal-tbl-auto.portal-legacy-layout {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		border: none;
	}

	table.portal-legacy-layout > tbody,
	table.portal-tbl-auto.portal-legacy-layout > tbody {
		display: block;
		width: 100%;
	}

	table.portal-legacy-layout > tbody > tr:has(> td[colspan]),
	table.portal-tbl-auto.portal-legacy-layout > tbody > tr:has(> td[colspan]) {
		display: block;
		margin-bottom: 8px;
		border: none;
		background: transparent;
		box-shadow: none;
	}

	table.portal-legacy-layout > tbody > tr:has(> td[colspan]) > td,
	table.portal-tbl-auto.portal-legacy-layout > tbody > tr:has(> td[colspan]) > td {
		display: block;
		width: 100% !important;
		padding: 8px 0;
		border: none;
		text-align: left !important;
	}

	table.portal-legacy-layout > tbody > tr:has(> td[colspan]) img,
	table.portal-tbl-auto.portal-legacy-layout > tbody > tr:has(> td[colspan]) img {
		width: 100% !important;
		max-width: 100%;
		height: auto !important;
	}

	table.portal-legacy-layout > tbody > tr:has(> th),
	table.portal-tbl-auto.portal-legacy-layout > tbody > tr:has(> th) {
		display: none;
	}

	table.portal-legacy-layout > tbody > tr:has(> td:not([colspan])),
	table.portal-tbl-auto.portal-legacy-layout > tbody > tr:has(> td:not([colspan])) {
		display: block;
		margin-bottom: 10px;
		border: 1px solid #e2e8f0;
		border-radius: 10px;
		overflow: hidden;
		background: #fff;
		box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	}

	table.portal-legacy-layout > tbody > tr:has(> td:not([colspan])) > td,
	table.portal-tbl-auto.portal-legacy-layout > tbody > tr:has(> td:not([colspan])) > td {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 10px;
		padding: 8px 12px;
		border-bottom: 1px solid #f1f5f9;
		width: auto !important;
		text-align: right !important;
		white-space: normal !important;
	}

	table.portal-legacy-layout > tbody > tr:has(> td:not([colspan])) > td:last-child,
	table.portal-tbl-auto.portal-legacy-layout > tbody > tr:has(> td:not([colspan])) > td:last-child {
		border-bottom: none;
	}

	table.portal-legacy-layout > tbody > tr:has(> td:not([colspan])) > td::before,
	table.portal-tbl-auto.portal-legacy-layout > tbody > tr:has(> td:not([colspan])) > td::before {
		content: attr(data-label);
		font-weight: 600;
		color: #64748b;
		font-size: 10px;
		text-align: left;
		flex: 0 0 44%;
		max-width: 44%;
		word-break: break-word;
		padding-right: 6px;
	}

	.portal-filter-row select,
	.portal-filter-row input[type="submit"],
	.portal-filter-row button {
		display: inline-block;
		width: auto;
		min-width: 72px;
		margin: 4px 4px 4px 0;
	}

	/* Dashboard (usermain / admin) */
	.portal-dash-header-inner {
		flex-wrap: wrap !important;
		height: auto !important;
		min-height: 56px;
		padding: 10px 12px !important;
		gap: 10px !important;
	}

	.portal-dash-search-wrap {
		flex: 1 1 100% !important;
		max-width: none !important;
		order: 3;
	}

	.portal-dash-user-actions {
		margin-left: auto !important;
	}

	.portal-dash-main {
		padding: 16px 12px !important;
	}

	.portal-dash-grid {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
		gap: 12px !important;
	}
}

/* Brand + avatar */
.portal-brand-name {
	font-weight: 700;
	font-size: 15px;
	color: #0f172a;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

/* แถวโลโก้ + ชื่อ Portal — gap เท่ากันทั้ง Web / Admin */
.portal-brand-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	min-width: 0;
}

/* ชื่อ Portal ใน header — ฟอนต์เดียวกับ portal-user-name */
.portal-portal-title,
.portal-employee-portal-label,
.portal-admin-brand .portal-brand-sub {
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #0f172a;
	letter-spacing: normal;
	line-height: 1.2;
	white-space: nowrap;
}

.portal-brand-sub,
.portal-user-role {
	font-size: 11px;
	color: #94a3b8;
	line-height: 1.2;
}

.portal-admin-header .portal-user-role,
.portal-dash-header-inner .portal-user-role {
	color: #2563eb;
	font-weight: 600;
}

.portal-employee-portal-label--inline {
	font-weight: 400;
	color: #0f172a;
}

.portal-user-name {
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #0f172a;
	line-height: 1.2;
}

.portal-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: linear-gradient(135deg, #272f7d 0%, #4a5fc7 100%);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: Inter, 'Noto Sans Thai', sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	flex-shrink: 0;
	overflow: hidden;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	vertical-align: middle;
}

.portal-avatar span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	line-height: 1;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	transform: none;
}

.portal-admin-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #1e293b;
	border-bottom: 1px solid #334155;
	box-shadow: 0 4px 18px rgba(15, 23, 42, 0.35);
	flex-shrink: 0;
}

/* บน header Admin ใช้โลโก้โทนมืด (ตัวอักษรสว่าง) เสมอ */
.portal-admin-header .portal-logo-light {
	display: none !important;
}

.portal-admin-header .portal-logo-dark {
	display: block !important;
}

.portal-admin-header .portal-home-logo:hover {
	background: rgba(255, 255, 255, 0.08);
}

.portal-admin-header .portal-portal-title,
.portal-admin-header .portal-employee-portal-label,
.portal-admin-header .portal-admin-brand .portal-brand-sub,
.portal-admin-header .portal-user-name,
.portal-admin-header .portal-admin-title,
.portal-admin-header .portal-admin-breadcrumb-current {
	color: #f8fafc;
}

.portal-admin-header .portal-user-role {
	color: #93c5fd;
	font-weight: 600;
}

.portal-admin-header .portal-admin-breadcrumb a {
	color: #94a3b8;
}

.portal-admin-header .portal-admin-breadcrumb a:hover {
	color: #e2e8f0;
}

.portal-admin-header .portal-admin-breadcrumb-sep {
	color: #64748b;
}

.portal-admin-header .portal-header-back,
.portal-admin-header .portal-admin-back {
	border-color: rgba(148, 163, 184, 0.35);
	background: rgba(255, 255, 255, 0.06);
	color: #e2e8f0;
	box-shadow: none;
}

.portal-admin-header .portal-header-back:hover,
.portal-admin-header .portal-admin-back:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(148, 163, 184, 0.55);
	color: #fff;
	box-shadow: none;
}

.portal-admin-header .portal-logout-btn {
	border-color: rgba(148, 163, 184, 0.35);
	color: #cbd5e1;
	background: transparent;
}

.portal-admin-header .portal-logout-btn:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(148, 163, 184, 0.55);
	color: #f8fafc;
}

.portal-admin-header .portal-avatar {
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.portal-admin-header-inner {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0 12px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	box-sizing: border-box;
}

@media (min-width: 640px) {
	.portal-admin-header-inner {
		padding: 0 24px;
	}
}

.portal-admin-header-inner-hub {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
}

.portal-admin-header-left,
.portal-admin-header-right {
	display: flex;
	align-items: center;
	min-width: 0;
}

.portal-admin-header-left {
	gap: 12px;
	flex: 1 1 auto;
	overflow: hidden;
}

.portal-admin-header-right {
	gap: 10px;
	flex-shrink: 0;
	margin-left: 8px;
}

.portal-header-back,
.portal-admin-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	min-width: 36px;
	min-height: 36px;
	margin-right: 8px;
	border-radius: 50%;
	border: 1.5px solid #e2e8f0;
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	color: #475569;
	text-decoration: none;
	box-sizing: border-box;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 2px 6px rgba(15, 23, 42, 0.04);
	transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.12s;
}

.portal-header-back .material-symbols-outlined,
.portal-admin-back .material-symbols-outlined {
	font-size: 20px;
	line-height: 1;
	font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

.portal-header-back:hover,
.portal-admin-back:hover {
	background: #f1f5f9;
	border-color: #cbd5e1;
	color: #1e293b;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
	transform: translateX(-1px);
}

.portal-admin-back {
	border-radius: 50%;
}

.portal-admin-back:hover {
	transform: translateX(-1px);
}

.portal-admin-title {
	font-size: 14px;
	font-weight: 500;
	color: #334155;
	line-height: 1.25;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.portal-admin-crumb {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
}

.portal-admin-breadcrumb {
	display: none;
	align-items: center;
	font-size: 14px;
	line-height: 1.25;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
}

@media (min-width: 768px) {
	.portal-admin-breadcrumb {
		display: flex;
	}
}

.portal-admin-breadcrumb a {
	color: #64748b;
	text-decoration: none;
	transition: color 0.15s;
}

.portal-admin-breadcrumb a:hover {
	color: #334155;
}

.portal-admin-breadcrumb-sep {
	margin: 0 6px;
	color: #cbd5e1;
	flex-shrink: 0;
}

.portal-admin-breadcrumb-current {
	color: #334155;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 767.98px) {
	.portal-admin-brand {
		display: none !important;
	}
}

@media (max-width: 639.98px) {
	.portal-admin-header-inner {
		gap: 8px;
	}

	.portal-admin-header-left {
		gap: 12px;
	}

	.portal-admin-header-right {
		gap: 6px;
		margin-left: 4px;
	}

	.portal-admin-user-text {
		display: none !important;
	}

	.portal-admin-header .portal-avatar {
		width: 28px;
		height: 28px;
	}

	.portal-admin-header .portal-avatar span {
		font-size: 11px;
		transform: translateY(0.5px);
	}
}

/* Portal switch buttons (Admin / User / ISO / E-docs) */
.portal-switch-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 36px;
	min-height: 36px;
	padding: 0 12px;
	border: none;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	cursor: pointer;
	font-family: inherit;
	line-height: 1;
	white-space: nowrap;
	flex-shrink: 0;
	box-sizing: border-box;
	transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.portal-switch-btn:hover {
	transform: translateY(-1px);
	filter: brightness(1.08);
}

.portal-switch-btn .material-symbols-outlined {
	font-size: 18px;
	font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.portal-switch-btn-admin {
	background: linear-gradient(135deg, #272F7D 0%, #4a5fc7 100%);
	color: #fff !important;
	box-shadow: 0 2px 10px rgba(39, 47, 125, 0.38);
}

.portal-switch-btn-admin:hover {
	box-shadow: 0 4px 16px rgba(39, 47, 125, 0.48);
}

.portal-switch-btn-user {
	background: linear-gradient(135deg, #0F766E 0%, #14B8A6 100%);
	color: #fff !important;
	box-shadow: 0 2px 10px rgba(15, 118, 110, 0.38);
}

.portal-switch-btn-user:hover {
	box-shadow: 0 4px 16px rgba(15, 118, 110, 0.48);
}

.portal-switch-btn-iso,
.portal-switch-btn-edocs {
	background: none;
	color: #64748b !important;
	border: 1.5px solid #e2e8f0;
	box-shadow: none;
	font-weight: 600;
}

.portal-switch-btn-iso:hover,
.portal-switch-btn-edocs:hover {
	background: #f8fafc;
	color: #334155 !important;
	box-shadow: none;
	transform: none;
	filter: none;
}

.portal-switch-btn-iso .material-symbols-outlined,
.portal-switch-btn-edocs .material-symbols-outlined {
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Logout + switch buttons — unified 36px */
.portal-logout-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 36px;
	min-height: 36px;
	padding: 0 12px;
	border: 1.5px solid #e2e8f0;
	border-radius: 10px;
	background: none;
	color: #64748b;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	font-family: inherit;
	line-height: 1;
	box-sizing: border-box;
	flex-shrink: 0;
}

.portal-logout-btn .material-symbols-outlined {
	font-size: 18px;
	line-height: 1;
}

.portal-logout-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	vertical-align: middle;
}

@media (max-width: 639.98px) {
	.portal-logout-label,
	.portal-switch-label {
		display: none !important;
	}

	.portal-logout-btn,
	button.portal-logout-btn,
	a.portal-logout-btn,
	.portal-switch-btn,
	a.portal-switch-btn,
	.portal-theme-toggle,
	.portal-header-back,
	.portal-admin-back {
		width: 36px !important;
		height: 36px !important;
		min-width: 36px !important;
		min-height: 36px !important;
		padding: 0 !important;
		gap: 0 !important;
	}
}

@media (min-width: 768px) and (max-width: 1023.98px) {
	.portal-tbl,
	.iot-tbl,
	table.portal-tbl-auto {
		min-width: 640px;
	}

	table.portal-legacy-layout,
	table.portal-tbl-auto.portal-legacy-layout {
		display: table;
		min-width: 720px;
	}

	.portal-legacy-scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin: 0 -8px;
		padding: 0 8px 8px;
	}
}

@media (min-width: 640px) {
	.portal-hide-sm-up {
		display: none !important;
	}
}

/* Document list tables — ISO / E-docs */
.docs-list-wrap {
	padding: 4px 16px 16px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (min-width: 640px) {
	.docs-list-wrap {
		padding: 4px 24px 20px;
	}
}

@media (min-width: 1024px) {
	.docs-list-wrap {
		padding: 4px 32px 24px;
	}
}

.docs-list-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	line-height: 1.45;
}

.docs-list-table th,
.docs-list-table td {
	padding: 12px 14px;
	vertical-align: middle;
	border-bottom: 1px solid #f1f5f9;
}

.docs-list-table thead th {
	background: #f8fafc;
	color: #64748b;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.docs-list-table tbody tr:hover {
	background: #f8fafc;
}

.docs-list-table .docs-col-num {
	width: 48px;
	text-align: center;
	color: #94a3b8;
	white-space: nowrap;
}

.docs-list-table .docs-col-date {
	width: 112px;
	white-space: nowrap;
	color: #94a3b8;
	font-size: 12px;
}

.docs-list-table .docs-col-type {
	width: 1%;
	white-space: nowrap;
	max-width: none;
}

.docs-list-table .docs-col-dept {
	width: 180px;
}

.docs-list-table .docs-col-user,
.docs-list-table .docs-col-detail {
	width: 160px;
}

.docs-list-table .docs-col-actions {
	width: 1%;
	white-space: nowrap;
	text-align: right;
}

.docs-list-name {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-width: 140px;
}

.docs-list-name .material-symbols-outlined {
	flex-shrink: 0;
	margin-top: 1px;
}

.docs-list-name-text {
	font-weight: 600;
	color: #0f172a;
	line-height: 1.45;
	word-break: break-word;
}

.docs-list-meta {
	color: #64748b;
	font-size: 13px;
	line-height: 1.4;
	word-break: break-word;
}

.docs-list-badge {
	display: inline-block;
	max-width: none;
	font-size: 11px;
	font-weight: 600;
	color: #1d4ed8;
	background: #eff6ff;
	padding: 3px 8px;
	border-radius: 6px;
	line-height: 1.25;
	white-space: nowrap;
	word-break: normal;
}

.docs-list-chip {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	font-size: 12px;
	font-weight: 500;
	color: #475569;
	background: #f1f5f9;
	border-radius: 999px;
	padding: 4px 10px;
	line-height: 1.35;
	white-space: normal;
	word-break: break-word;
}

.docs-list-actions {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	flex-wrap: nowrap;
}

.docs-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 8px;
	padding: 7px 11px;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
}

.docs-btn .material-symbols-outlined {
	font-size: 16px;
}

.docs-btn-view {
	color: #475569;
	border: 1px solid #e2e8f0;
	background: #fff;
}

.docs-btn-view:hover {
	background: #f8fafc;
}

.docs-btn-dl {
	color: #fff;
	background: #f59e0b;
	border: 1px solid #f59e0b;
}

.docs-btn-dl:hover {
	background: #d97706;
}

.docs-btn-del {
	color: #dc2626;
	border: 1px solid #fecaca;
	background: #fff;
}

.docs-btn-del:hover {
	background: #fef2f2;
}

.docs-btn-restore {
	color: #1d4ed8;
	border: 1px solid #bfdbfe;
	background: #fff;
}

.docs-btn-restore:hover {
	background: #eff6ff;
}

@media (max-width: 639px) {
	.docs-list-wrap {
		padding: 4px 12px 14px;
	}

	.docs-list-table th,
	.docs-list-table td {
		padding: 10px 10px;
	}

	.docs-btn-label {
		display: none;
	}
}

.portal-edocs-dl {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
}

.portal-edocs-dl > summary {
	list-style: none;
	cursor: pointer;
}

.portal-edocs-dl > summary::-webkit-details-marker {
	display: none;
}

.portal-edocs-dl-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 220px;
	padding: 7px 12px;
	border-radius: 8px;
	border: 1px solid #f59e0b;
	background: #f59e0b;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
	white-space: nowrap;
}

.portal-edocs-dl-btn:hover,
.portal-edocs-dl[open] > .portal-edocs-dl-btn {
	background: #d97706;
	border-color: #d97706;
}

.portal-edocs-dl-btn .material-symbols-outlined {
	font-size: 18px;
	flex-shrink: 0;
}

.portal-edocs-dl-text {
	overflow: hidden;
	text-overflow: ellipsis;
}

.portal-edocs-dl-caret {
	font-size: 18px !important;
	margin-left: -2px;
}

.portal-edocs-dl-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 80;
	min-width: 240px;
	max-width: min(360px, 80vw);
	max-height: 280px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
	padding: 6px;
}

.portal-edocs-dl-menu a {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 8px;
	color: #0f172a;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
}

.portal-edocs-dl-menu a:hover {
	background: #f8fafc;
}

.portal-edocs-dl-menu .material-symbols-outlined {
	font-size: 18px;
	color: #f59e0b;
	flex-shrink: 0;
	margin-top: 1px;
}

@media (max-width: 639px) {
	.portal-edocs-dl-text {
		display: none;
	}

	.portal-edocs-dl-btn {
		max-width: none;
		padding: 7px 9px;
	}
}

/* Theme toggle */
.portal-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border: 1.5px solid #e2e8f0;
	border-radius: 8px;
	background: transparent;
	color: #64748b;
	cursor: pointer;
	padding: 0;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.portal-theme-toggle:hover {
	background: #f8fafc;
	color: #0f172a;
}

.portal-theme-toggle .portal-theme-icon {
	display: none;
	line-height: 0;
}

html:not([data-theme="dark"]) .portal-theme-toggle .portal-theme-icon-moon,
html[data-theme="light"] .portal-theme-toggle .portal-theme-icon-moon {
	display: block;
}

html[data-theme="dark"] .portal-theme-toggle .portal-theme-icon-moon {
	display: none;
}

html[data-theme="dark"] .portal-theme-toggle .portal-theme-icon-sun {
	display: block;
}

.portal-theme-toggle-login {
	position: absolute;
	top: 12px;
	right: 12px;
}

.portal-theme-toggle-float {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 80;
	background: #fff;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
}

.login-card {
	position: relative;
}

/* Dark theme */
html[data-theme="dark"] {
	color-scheme: dark;
	background: #0b1220;
}

html[data-theme="dark"] body,
html[data-theme="dark"] body.bg-slate-50,
html[data-theme="dark"] body.bg-slate-100,
html[data-theme="dark"] body.bg-gray-50,
html[data-theme="dark"] body.bg-white {
	background-color: #0b1220 !important;
	color: #e2e8f0 !important;
}

html[data-theme="dark"] header,
html[data-theme="dark"] aside,
html[data-theme="dark"] footer,
html[data-theme="dark"] .portal-home-logo-bar {
	background-color: #0f172a !important;
	border-color: #1e293b !important;
	color: #e2e8f0 !important;
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-slate-100,
html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-gray-100,
html[data-theme="dark"] .bg-gray-50 {
	background-color: #1e293b !important;
}

html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-100,
html[data-theme="dark"] .border-blue-200,
html[data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
	border-color: #334155 !important;
}

html[data-theme="dark"] .text-slate-800,
html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-slate-700,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-gray-900 {
	color: #f1f5f9 !important;
}

html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-slate-500,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-400 {
	color: #94a3b8 !important;
}

html[data-theme="dark"] .hover\:bg-slate-50:hover,
html[data-theme="dark"] .hover\:bg-slate-100:hover,
html[data-theme="dark"] .hover\:bg-gray-50:hover {
	background-color: #334155 !important;
}

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
	background-color: #0f172a !important;
	color: #f8fafc !important;
	border-color: #475569 !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
	color: #64748b !important;
}

html[data-theme="dark"] table,
html[data-theme="dark"] .docs-list-table,
html[data-theme="dark"] .portal-tbl,
html[data-theme="dark"] .portal-admin-table {
	color: #e2e8f0;
}

html[data-theme="dark"] .docs-list-table thead th,
html[data-theme="dark"] .portal-tbl thead th,
html[data-theme="dark"] .portal-admin-table thead th,
html[data-theme="dark"] table thead th {
	background: #0f172a !important;
	color: #94a3b8 !important;
	border-color: #334155 !important;
}

html[data-theme="dark"] .docs-list-table td,
html[data-theme="dark"] .portal-admin-table tbody td,
html[data-theme="dark"] table td {
	border-color: #1e293b !important;
	color: #cbd5e1;
}

html[data-theme="dark"] .docs-list-table tbody tr:hover,
html[data-theme="dark"] .hover\:bg-slate-50:hover {
	background: #0f172a !important;
}

html[data-theme="dark"] .docs-list-name-text {
	color: #f8fafc;
}

html[data-theme="dark"] .docs-list-meta {
	color: #94a3b8;
}

html[data-theme="dark"] .docs-list-chip {
	background: #334155;
	color: #e2e8f0;
}

html[data-theme="dark"] .docs-btn-view {
	background: #0f172a;
	color: #cbd5e1;
	border-color: #475569;
}

html[data-theme="dark"] .docs-btn-dl {
	background: #b45309;
	color: #fff;
	border-color: #b45309;
}

html[data-theme="dark"] .docs-btn-dl:hover {
	background: #d97706;
}

/* QR user list — readable data hierarchy in dark mode */
html[data-theme="dark"] .qr-user-panel {
	background: #1e293b !important;
	border-color: #334155 !important;
}

html[data-theme="dark"] .qr-user-panel-head {
	background: #0f172a !important;
	border-color: #334155 !important;
}

html[data-theme="dark"] .qr-user-panel .text-slate-800,
html[data-theme="dark"] .qr-user-panel h2 {
	color: #f8fafc !important;
}

html[data-theme="dark"] .qr-user-panel .text-slate-400 {
	color: #94a3b8 !important;
}

html[data-theme="dark"] .qr-user-count,
html[data-theme="dark"] .qr-user-panel .bg-blue-50 {
	background: rgba(59, 130, 246, 0.18) !important;
	color: #93c5fd !important;
}

html[data-theme="dark"] .qr-user-panel .docs-list-name-text {
	color: #f8fafc !important;
}

html[data-theme="dark"] .qr-user-panel .docs-list-meta,
html[data-theme="dark"] .qr-user-panel .docs-col-detail,
html[data-theme="dark"] .qr-user-panel .docs-col-date,
html[data-theme="dark"] .qr-user-panel .docs-col-num {
	color: #94a3b8 !important;
}

html[data-theme="dark"] .qr-user-panel .docs-list-table thead th {
	background: #0f172a !important;
	color: #94a3b8 !important;
	border-color: #334155 !important;
}

html[data-theme="dark"] .qr-user-panel .docs-list-table tbody tr:hover {
	background: #0f172a !important;
}

html[data-theme="dark"] .qr-user-panel .docs-btn-view {
	background: #0f172a !important;
	color: #e2e8f0 !important;
	border-color: #475569 !important;
}

html[data-theme="dark"] .qr-user-panel .docs-btn-view:hover {
	background: #1e293b !important;
	color: #f8fafc !important;
}

html[data-theme="dark"] .text-slate-400 {
	color: #94a3b8 !important;
}

html[data-theme="dark"] .bg-blue-50 {
	background-color: rgba(59, 130, 246, 0.18) !important;
}

html[data-theme="dark"] .text-blue-700 {
	color: #93c5fd !important;
}

html[data-theme="dark"] .portal-logout-btn {
	border-color: #475569 !important;
	color: #cbd5e1 !important;
	background: transparent !important;
}

html[data-theme="dark"] .portal-logout-btn:hover {
	background: #1e293b !important;
	color: #f8fafc !important;
}

html[data-theme="dark"] .portal-switch-btn-admin {
	background: linear-gradient(135deg, #3d4fc4 0%, #6366f1 100%);
	box-shadow: 0 2px 12px rgba(99, 102, 241, 0.4);
}

html[data-theme="dark"] .portal-switch-btn-user {
	background: linear-gradient(135deg, #0d9488 0%, #2dd4bf 100%);
	box-shadow: 0 2px 12px rgba(45, 212, 191, 0.35);
}

html[data-theme="dark"] .portal-switch-btn-iso,
html[data-theme="dark"] .portal-switch-btn-edocs {
	background: transparent;
	color: #cbd5e1 !important;
	border-color: #475569;
	box-shadow: none;
}

html[data-theme="dark"] .portal-switch-btn-iso:hover,
html[data-theme="dark"] .portal-switch-btn-edocs:hover {
	background: #1e293b;
	color: #f8fafc !important;
	box-shadow: none;
}

html[data-theme="dark"] .portal-theme-toggle {
	border-color: #475569;
	color: #e2e8f0;
}

html[data-theme="dark"] .portal-theme-toggle:hover,
html[data-theme="dark"] .portal-theme-toggle-float {
	background: #1e293b;
	color: #f8fafc;
}

html[data-theme="dark"] .portal-home-logo:hover {
	background: #1e293b;
}

html[data-theme="dark"] .portal-header-back,
html[data-theme="dark"] .portal-admin-back {
	border-color: #475569;
	background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
	color: #cbd5e1;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .portal-header-back:hover,
html[data-theme="dark"] .portal-admin-back:hover {
	background: #334155;
	border-color: #64748b;
	color: #f8fafc;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .portal-admin-title {
	color: #f1f5f9;
}

html[data-theme="dark"] .portal-admin-breadcrumb a {
	color: #94a3b8;
}

html[data-theme="dark"] .portal-admin-breadcrumb a:hover {
	color: #f1f5f9;
}

html[data-theme="dark"] .portal-admin-breadcrumb-sep {
	color: #475569;
}

html[data-theme="dark"] .portal-admin-breadcrumb-current {
	color: #f1f5f9;
}

html[data-theme="dark"] .nav-item {
	color: #cbd5e1;
}

html[data-theme="dark"] .nav-item:hover {
	background: #1e293b;
	color: #f8fafc;
}

html[data-theme="dark"] .nav-item.active {
	background: #3b82f6 !important;
	color: #fff !important;
}

/* IoT Water Filter — dark mode data readability */
html[data-theme="dark"] .iot-tbl {
	color: #e2e8f0;
}

html[data-theme="dark"] .iot-tbl thead th {
	background: #0f172a !important;
	color: #94a3b8 !important;
	border-color: #334155 !important;
}

html[data-theme="dark"] .iot-tbl th,
html[data-theme="dark"] .iot-tbl td {
	border-bottom-color: #1e293b !important;
	color: #cbd5e1;
}

html[data-theme="dark"] .iot-tbl .c-num {
	color: #64748b !important;
}

html[data-theme="dark"] .iot-tbl tbody tr:hover {
	background: #0f172a !important;
}

html[data-theme="dark"] .iot-tbl tbody tr.bg-red-50,
html[data-theme="dark"] .bg-red-50 {
	background: rgba(127, 29, 29, 0.35) !important;
}

html[data-theme="dark"] .iot-badge-online {
	background: rgba(16, 185, 129, 0.2) !important;
	color: #6ee7b7 !important;
}

html[data-theme="dark"] .iot-badge-offline {
	background: rgba(239, 68, 68, 0.22) !important;
	color: #fca5a5 !important;
}

html[data-theme="dark"] .iot-tbl-scroll-hint {
	background: #0f172a !important;
	border-bottom-color: #334155 !important;
	color: #64748b !important;
}

html[data-theme="dark"] .iot-panel-head {
	background: #0f172a;
	border-color: #334155 !important;
}

html[data-theme="dark"] .iot-panel {
	background: #1e293b !important;
	border-color: #334155 !important;
}

html[data-theme="dark"] .iot-panel-head h2,
html[data-theme="dark"] .iot-panel-head .text-slate-800 {
	color: #f8fafc !important;
}

html[data-theme="dark"] .iot-panel-head .text-slate-400 {
	color: #94a3b8 !important;
}

html[data-theme="dark"] .iot-panel-head .bg-blue-50,
html[data-theme="dark"] .iot-panel-head .text-blue-700 {
	background: rgba(59, 130, 246, 0.18) !important;
	color: #93c5fd !important;
}

html[data-theme="dark"] #app-sidebar.border-r.border-blue-200 {
	border-color: #334155 !important;
}

html[data-theme="dark"] #sidebar-toggle-btn {
	background: #1e293b !important;
	border-color: #475569 !important;
	color: #93c5fd !important;
}

html[data-theme="dark"] .iot-home-title {
	color: #f8fafc !important;
}

html[data-theme="dark"] .iot-home-desc {
	color: #94a3b8 !important;
}

html[data-theme="dark"] .iot-home-card {
	background: #1e293b !important;
	border-color: #334155 !important;
	color: #e2e8f0 !important;
	box-shadow: none;
}

html[data-theme="dark"] .iot-home-card .text-slate-400 {
	color: #94a3b8 !important;
}

html[data-theme="dark"] .iot-home-card:hover {
	border-color: #fb923c !important;
	color: #fdba74 !important;
}

@media (max-width: 767.98px) {
	html[data-theme="dark"] .iot-tbl tbody tr,
	html[data-theme="dark"] .portal-tbl tbody tr {
		background: #1e293b !important;
		border-color: #334155 !important;
		box-shadow: none;
	}

	html[data-theme="dark"] .iot-tbl tbody tr.bg-red-50,
	html[data-theme="dark"] .portal-tbl tbody tr.bg-red-50 {
		background: rgba(127, 29, 29, 0.4) !important;
		border-color: #7f1d1d !important;
	}

	html[data-theme="dark"] .iot-tbl tbody tr:hover,
	html[data-theme="dark"] .portal-tbl tbody tr:hover {
		background: #1e293b !important;
	}

	html[data-theme="dark"] .iot-tbl td,
	html[data-theme="dark"] .portal-tbl td {
		border-bottom-color: #334155 !important;
		color: #e2e8f0 !important;
	}

	html[data-theme="dark"] .iot-tbl td::before,
	html[data-theme="dark"] .portal-tbl td::before {
		color: #94a3b8 !important;
	}
}

html[data-theme="dark"] .sys-card,
html[data-theme="dark"] .portal-sys-card {
	background: #1e293b !important;
	border-color: #334155 !important;
}

html[data-theme="dark"] .login-card {
	background: rgba(15, 23, 42, 0.88);
	color: #e2e8f0;
}

html[data-theme="dark"] .login-card h2,
html[data-theme="dark"] .login-card label {
	color: #f8fafc !important;
}

html[data-theme="dark"] .login-video-overlay {
	background: linear-gradient(180deg, rgba(2, 6, 23, 0.4) 0%, rgba(2, 6, 23, 0.72) 100%);
}

html[data-theme="dark"] #welcome-card,
html[data-theme="dark"] #modal-card,
html[data-theme="dark"] #forgot-modal-panel {
	background: #1e293b !important;
	color: #e2e8f0 !important;
}

html[data-theme="dark"] [style*="background:#fff;"],
html[data-theme="dark"] [style*="background: #fff;"],
html[data-theme="dark"] [style*="background:#FFF;"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background:#FFFFFF"] {
	background-color: #1e293b !important;
}

html[data-theme="dark"] [style*="background:#F0F4F8"],
html[data-theme="dark"] [style*="background:#F8FAFC"],
html[data-theme="dark"] [style*="background:#F1F5F9"],
html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background:#f1f5f9"] {
	background-color: #0f172a !important;
}

html[data-theme="dark"] [style*="color:#0F172A"],
html[data-theme="dark"] [style*="color:#0f172a"] {
	color: #f1f5f9 !important;
}

html[data-theme="dark"] [style*="border:1.5px solid #E2E8F0"],
html[data-theme="dark"] [style*="border:1.5px solid #F1F5F9"],
html[data-theme="dark"] [style*="border-bottom:1px solid #E2E8F0"],
html[data-theme="dark"] [style*="border-top:1px solid #E2E8F0"] {
	border-color: #334155 !important;
}

html[data-theme="dark"] .portal-admin-table tbody td {
	color: #cbd5e1;
	border-color: #1e293b;
}

html[data-theme="dark"] .portal-edocs-dl-btn {
	background: rgba(245, 158, 11, 0.16) !important;
	border-color: #d97706 !important;
	color: #fcd34d !important;
}

html[data-theme="dark"] .portal-edocs-dl-btn:hover,
html[data-theme="dark"] .portal-edocs-dl[open] > .portal-edocs-dl-btn {
	background: rgba(245, 158, 11, 0.28) !important;
	border-color: #f59e0b !important;
	color: #fde68a !important;
}

html[data-theme="dark"] .portal-edocs-dl-btn .material-symbols-outlined,
html[data-theme="dark"] .portal-edocs-dl-caret {
	color: #fbbf24 !important;
}

html[data-theme="dark"] .portal-edocs-dl-menu {
	background: #1e293b !important;
	border-color: #475569 !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .portal-edocs-dl-menu a {
	color: #e2e8f0 !important;
}

html[data-theme="dark"] .portal-edocs-dl-menu a:hover {
	background: #334155 !important;
	color: #f8fafc !important;
}

html[data-theme="dark"] .portal-edocs-dl-menu .material-symbols-outlined {
	color: #fbbf24 !important;
}

/* Repair IT / Central — dark text + hover contrast */
html[data-theme="dark"] [style*="color:#1c2340"],
html[data-theme="dark"] [style*="color:#334155"],
html[data-theme="dark"] [style*="color:#374151"] {
	color: #e8eef7 !important;
}

html[data-theme="dark"] [style*="color:#4a5270"],
html[data-theme="dark"] [style*="color:#646464"] {
	color: #cbd5e1 !important;
}

html[data-theme="dark"] [style*="color:#8b93b0"] {
	color: #94a3b8 !important;
}

html[data-theme="dark"] .readonly-val {
	color: #e8eef7 !important;
}

html[data-theme="dark"] .field-group label {
	color: #94a3b8 !important;
}

html[data-theme="dark"] .hover\:text-slate-700:hover,
html[data-theme="dark"] .hover\:text-slate-800:hover,
html[data-theme="dark"] .hover\:text-gray-700:hover {
	color: #f8fafc !important;
}

html[data-theme="dark"] .tab-bar {
	background: #0f172a;
	border-color: #334155;
}

html[data-theme="dark"] .tab-bar a {
	color: #cbd5e1;
}

html[data-theme="dark"] .date-filter-bar {
	background: #0f172a !important;
	border-color: #334155 !important;
	color: #e2e8f0;
}

html[data-theme="dark"] .repair-table,
html[data-theme="dark"] .repair-table td,
html[data-theme="dark"] .repair-table th {
	color: #e2e8f0;
}

html[data-theme="dark"] .portal-admin-table tbody tr:hover td,
html[data-theme="dark"] .repair-table tbody tr:hover td,
html[data-theme="dark"] .repair-table.portal-admin-table tbody tr:hover td,
html[data-theme="dark"] table.portal-admin-table tbody tr:hover td {
	background: #243656 !important;
	color: #f8fafc !important;
}

html[data-theme="dark"] .repair-table tbody tr:hover td [style*="color:#1c2340"],
html[data-theme="dark"] .repair-table tbody tr:hover td [style*="color:#4a5270"],
html[data-theme="dark"] .repair-table tbody tr:hover td [style*="color:#8b93b0"],
html[data-theme="dark"] .portal-admin-table tbody tr:hover td [style*="color:#1c2340"],
html[data-theme="dark"] .portal-admin-table tbody tr:hover td [style*="color:#4a5270"],
html[data-theme="dark"] .portal-admin-table tbody tr:hover td [style*="color:#8b93b0"] {
	color: #e8eef7 !important;
}

html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .card {
	color: #e2e8f0;
}

/* Repair IT / Central — rows, badges, buttons in dark mode */
html[data-theme="dark"] .repair-table thead th,
html[data-theme="dark"] .repair-table th {
	background: #132037 !important;
	color: #93c5fd !important;
	border-bottom-color: #334155 !important;
}

html[data-theme="dark"] .repair-table tbody tr,
html[data-theme="dark"] .repair-table tbody tr[style] {
	background: #162033 !important;
	background-image: none !important;
}

html[data-theme="dark"] .repair-table tbody tr:nth-child(even),
html[data-theme="dark"] .repair-table tbody tr:nth-child(even)[style] {
	background: #1a2740 !important;
	background-image: none !important;
}

html[data-theme="dark"] .repair-table tbody td {
	background: transparent !important;
	border-bottom-color: #243049 !important;
	color: #e2e8f0;
}

html[data-theme="dark"] .repair-table tbody tr:hover,
html[data-theme="dark"] .repair-table tbody tr:hover[style],
html[data-theme="dark"] .repair-table tbody tr:hover td,
html[data-theme="dark"] .portal-admin-table tbody tr:hover,
html[data-theme="dark"] .portal-admin-table tbody tr:hover td {
	background: #243b5e !important;
	background-image: none !important;
	color: #f8fafc !important;
}

html[data-theme="dark"] .repair-table tbody tr.empty-row,
html[data-theme="dark"] .repair-table tbody tr.empty-row td {
	background: #162033 !important;
	color: #94a3b8 !important;
}

html[data-theme="dark"] .repair-table td a,
html[data-theme="dark"] .portal-admin-table .col-actions a {
	color: #93c5fd;
	filter: none;
}

html[data-theme="dark"] .repair-table a[style*="color:#dc2626"],
html[data-theme="dark"] .portal-admin-table a[style*="color:#dc2626"] {
	color: #f87171 !important;
}

html[data-theme="dark"] .tab-bar,
html[data-theme="dark"] .tab-bar-inner {
	background: #0f172a !important;
	border-color: #334155 !important;
}

html[data-theme="dark"] .tab-bar a,
html[data-theme="dark"] .tab-bar-inner a {
	color: #cbd5e1 !important;
}

html[data-theme="dark"] .tab-bar a:hover,
html[data-theme="dark"] .tab-bar-inner a:hover {
	background: #1e293b !important;
	color: #f8fafc !important;
}

html[data-theme="dark"] .tab-bar a.active,
html[data-theme="dark"] .tab-bar-inner a.active,
html[data-theme="dark"] .tab-bar a[style*="background:#fff"],
html[data-theme="dark"] .tab-bar-inner a[style*="background:#fff"] {
	background: #1e3a5f !important;
	color: #93c5fd !important;
	box-shadow: none;
}

html[data-theme="dark"] .tab-bar a.active.history-tab,
html[data-theme="dark"] .tab-bar-inner a[style*="color:#0d7a4e"] {
	background: #134e3a !important;
	color: #6ee7b7 !important;
}

html[data-theme="dark"] .pagination a,
html[data-theme="dark"] .pagination .arrow {
	color: #cbd5e1 !important;
	border-color: #334155 !important;
	background: transparent !important;
}

html[data-theme="dark"] .pagination a:hover,
html[data-theme="dark"] .pagination .arrow:hover {
	background: #1e293b !important;
	border-color: #64748b !important;
	color: #f8fafc !important;
}

html[data-theme="dark"] .pagination b {
	background: #d97706 !important;
	color: #fff !important;
	box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35);
}

html[data-theme="dark"] .date-filter-bar input[type="submit"],
html[data-theme="dark"] a[style*="background:#1e46d4"],
html[data-theme="dark"] button[style*="background:#1e46d4"],
html[data-theme="dark"] input[style*="background:#1e46d4"],
html[data-theme="dark"] .btn-save {
	background: #2563eb !important;
	color: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 2px 10px rgba(37, 99, 235, 0.32);
}

html[data-theme="dark"] .date-filter-bar input[type="submit"]:hover,
html[data-theme="dark"] a[style*="background:#1e46d4"]:hover,
html[data-theme="dark"] .btn-save:hover {
	background: #3b82f6 !important;
}

html[data-theme="dark"] button[style*="background:#0d7a4e"],
html[data-theme="dark"] [style*="background:#0d7a4e"] {
	background: #059669 !important;
	color: #fff !important;
}

html[data-theme="dark"] .btn-cancel,
html[data-theme="dark"] .btn-close {
	background: #1e293b !important;
	color: #e2e8f0 !important;
	border-color: #475569 !important;
}

html[data-theme="dark"] .btn-cancel:hover,
html[data-theme="dark"] .btn-close:hover {
	background: #334155 !important;
	color: #f8fafc !important;
}

html[data-theme="dark"] [style*="background:#e0f2fe"] {
	background: rgba(14, 165, 233, 0.14) !important;
}

html[data-theme="dark"] [style*="background:#fefce8"],
html[data-theme="dark"] [style*="background:#fef9c3"] {
	background: rgba(234, 179, 8, 0.14) !important;
}

html[data-theme="dark"] [style*="background:#fff0f9"] {
	background: rgba(236, 72, 153, 0.14) !important;
}

html[data-theme="dark"] [style*="background:#e6f9f0"] {
	background: rgba(16, 185, 129, 0.14) !important;
}

html[data-theme="dark"] [style*="background:#fee2e2"] {
	background: rgba(239, 68, 68, 0.16) !important;
}

html[data-theme="dark"] [style*="background:#fff7ed"] {
	background: rgba(249, 115, 22, 0.16) !important;
}

html[data-theme="dark"] [style*="color:#0369a1"] {
	color: #7dd3fc !important;
}

html[data-theme="dark"] [style*="color:#854d0e"] {
	color: #fbbf24 !important;
}

html[data-theme="dark"] [style*="color:#9d174d"] {
	color: #f9a8d4 !important;
}

html[data-theme="dark"] [style*="color:#0d7a4e"] {
	color: #6ee7b7 !important;
}

html[data-theme="dark"] [style*="background:#0d7a4e"] {
	color: #fff !important;
}

html[data-theme="dark"] [style*="color:#dc2626"],
html[data-theme="dark"] [style*="color:#b91c1c"] {
	color: #fca5a5 !important;
}

html[data-theme="dark"] [style*="color:#c2410c"] {
	color: #fdba74 !important;
}

html[data-theme="dark"] #exportPanel {
	background: #1e293b !important;
	border-color: #334155 !important;
	color: #e2e8f0;
}

/* Repair detail pages — view / edit / create forms */
html[data-theme="dark"] .card {
	background: #1e293b !important;
	border-color: #334155 !important;
	color: #e2e8f0;
}

html[data-theme="dark"] .card-header {
	background: #0f172a !important;
	color: #cbd5e1 !important;
	border-bottom-color: #334155 !important;
}

html[data-theme="dark"] .card-header.yellow {
	background: #2a2418 !important;
	color: #fcd34d !important;
	border-bottom-color: #854d0e !important;
}

html[data-theme="dark"] .card-header.blue {
	background: #172554 !important;
	color: #93c5fd !important;
	border-bottom-color: #1e40af !important;
}

html[data-theme="dark"] .card-body {
	background: transparent;
	color: #e2e8f0;
}

html[data-theme="dark"] #statusCard .field-group label {
	color: #94a3b8 !important;
}

html[data-theme="dark"] .field-group input[type="text"],
html[data-theme="dark"] .field-group textarea,
html[data-theme="dark"] .field-group select {
	background: #0f172a !important;
	color: #f1f5f9 !important;
	border-color: #475569 !important;
}

html[data-theme="dark"] .field-group input:focus,
html[data-theme="dark"] .field-group textarea:focus,
html[data-theme="dark"] .field-group select:focus {
	background: #1e293b !important;
	border-color: #3b82f6 !important;
}

html[data-theme="dark"] .field-group input[readonly] {
	background: #1a2332 !important;
	color: #94a3b8 !important;
}

html[data-theme="dark"] .radio-group label {
	color: #e2e8f0 !important;
}

html[data-theme="dark"] .badge-pending {
	background: rgba(234, 179, 8, 0.2) !important;
	color: #fbbf24 !important;
}

html[data-theme="dark"] .badge-done {
	background: rgba(16, 185, 129, 0.2) !important;
	color: #6ee7b7 !important;
}

html[data-theme="dark"] .remark-box {
	background: rgba(59, 130, 246, 0.12) !important;
	border-color: #334155 !important;
}

html[data-theme="dark"] .remark-box .remark-label,
html[data-theme="dark"] .remark-box .remark-text {
	color: inherit !important;
}

html[data-theme="dark"] a[style*="color:#1e46d4"],
html[data-theme="dark"] .readonly-val a {
	color: #93c5fd !important;
}

html[data-theme="dark"] [style*="background:#f8f9fc"],
html[data-theme="dark"] [style*="background:#f0f5ff"],
html[data-theme="dark"] [style*="background:#eef0f6"],
html[data-theme="dark"] [style*="background:#fff5f5"],
html[data-theme="dark"] [style*="background:#ffe4e4"] {
	background: #0f172a !important;
}

/* Central repair upload zones — match IT dashed border in dark */
html[data-theme="dark"] [style*="border:1.5px dashed #fca5a5"],
html[data-theme="dark"] [style*="border:1px solid #fca5a5"] {
	border-color: #475569 !important;
}

html[data-theme="dark"] #file-upload-area svg[stroke="#dc2626"],
html[data-theme="dark"] #file-upload-area2 svg[stroke="#dc2626"],
html[data-theme="dark"] #file-selected svg[stroke="#dc2626"],
html[data-theme="dark"] #file-selected2 svg[stroke="#dc2626"] {
	stroke: #94a3b8 !important;
}

html[data-theme="dark"] [style*="background:#fff4e2"] {
	background: #2a2418 !important;
}

html[data-theme="dark"] [style*="background:#e8eeff"] {
	background: #172554 !important;
}

html[data-theme="dark"] [style*="color:#6b5c2e"] {
	color: #fcd34d !important;
}

html[data-theme="dark"] [style*="color:#1535a8"] {
	color: #93c5fd !important;
}

html[data-theme="dark"] [style*="color:#065f46"] {
	color: #6ee7b7 !important;
}

html[data-theme="dark"] [style*="border:1px solid #d8dce8"],
html[data-theme="dark"] [style*="border:1px solid #e2e6f0"],
html[data-theme="dark"] [style*="border:1.5px dashed #d8dce8"] {
	border-color: #475569 !important;
}

html[data-theme="dark"] [style*="border:1px solid #1e46d4"] {
	border-color: #3b82f6 !important;
}

html[data-theme="dark"] [style*="border:1px solid #6ee7b7"] {
	border-color: #059669 !important;
}

html[data-theme="dark"] [style*="background:#fff;border:1px solid #e2e6f0"],
html[data-theme="dark"] [style*="background:#fff; border:1px solid #e2e6f0"] {
	background: #1e293b !important;
	border-color: #334155 !important;
}

html[data-theme="dark"] #confirmModal > div,
html[data-theme="dark"] [style*="background:#fff; border-radius:16px"] {
	background: #1e293b !important;
	color: #e2e8f0 !important;
	border: 1px solid #334155;
}

html[data-theme="dark"] #confirmModal button[style*="background:#fff"],
html[data-theme="dark"] button[style*="background:#fff;cursor:pointer"] {
	background: #334155 !important;
	color: #e2e8f0 !important;
	border-color: #475569 !important;
}

html[data-theme="dark"] button[style*="linear-gradient(135deg,#4ade80"],
html[data-theme="dark"] button[style*="linear-gradient(135deg, #4ade80"] {
	background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
	color: #fff !important;
}

html[data-theme="dark"] img[style*="border:1px solid #d8dce8"] {
	border-color: #475569 !important;
}

html[data-theme="dark"] label[style*="color:#1e46d4"] {
	color: #93c5fd !important;
}

html[data-theme="dark"] .rounded-\[18px\].bg-white,
html[data-theme="dark"] main .bg-white.rounded-\[18px\],
html[data-theme="dark"] main .bg-white.border {
	background-color: #1e293b !important;
	border-color: #334155 !important;
}

html[data-theme="dark"] main .bg-gray-50.border-b,
html[data-theme="dark"] .px-7.py-5.border-b.bg-gray-50 {
	background-color: #0f172a !important;
	border-color: #334155 !important;
}

html[data-theme="dark"] footer.bg-white {
	background-color: #0f172a !important;
	border-color: #334155 !important;
	color: #64748b !important;
}

html[data-theme="dark"] input[style*="background:#f8f9fc"],
html[data-theme="dark"] textarea[style*="background:#f8f9fc"] {
	background: #0f172a !important;
	color: #f1f5f9 !important;
	border-color: #475569 !important;
}

html[data-theme="dark"] button[type="reset"][style*="background:#fff"],
html[data-theme="dark"] button[style*="background:#fff;color:#8b93b0"] {
	background: #334155 !important;
	color: #cbd5e1 !important;
	border-color: #475569 !important;
}

html[data-theme="dark"] hr[style*="border-top:1px solid #eef0f6"] {
	border-top-color: #334155 !important;
}

html[data-theme="dark"] label[style*="color:#1c2340"] {
	color: #e2e8f0 !important;
}

/* Admin header — username + role */
html[data-theme="dark"] .portal-admin-header {
	background: #1e293b !important;
	border-bottom-color: #334155 !important;
	box-shadow: 0 4px 18px rgba(15, 23, 42, 0.45);
}

html[data-theme="dark"] .portal-user-name,
html[data-theme="dark"] .portal-admin-header .portal-user-name,
html[data-theme="dark"] .portal-dash-header-inner .portal-user-name {
	color: #f8fafc !important;
}

html[data-theme="dark"] .portal-admin-header .portal-user-role,
html[data-theme="dark"] .portal-dash-header-inner .portal-user-role {
	color: #93c5fd !important;
}

html[data-theme="dark"] .portal-portal-title,
html[data-theme="dark"] .portal-employee-portal-label {
	color: #f1f5f9 !important;
}

html[data-theme="dark"] .portal-admin-header .portal-portal-title,
html[data-theme="dark"] .portal-admin-header .portal-employee-portal-label,
html[data-theme="dark"] .portal-admin-header .portal-admin-brand .portal-brand-sub {
	color: #f8fafc !important;
}

html[data-theme="dark"] footer.text-slate-400.border-t.bg-white {
	background: #0f172a !important;
	border-color: #334155 !important;
	color: #64748b !important;
}

/* Repair list — history tab area under page header */
html[data-theme="dark"] .tab-panel {
	background: transparent !important;
	color: #e2e8f0;
}

html[data-theme="dark"] .stat-sub {
	color: #94a3b8 !important;
}

html[data-theme="dark"] .flatpickr-input {
	background: #0f172a !important;
	color: #f8fafc !important;
	border-color: #475569 !important;
}

html[data-theme="dark"] a[style*="background:#fff"][style*="border:1px solid #d8dce8"],
html[data-theme="dark"] a[style*="background:#fff;"][style*="border:1px solid #d8dce8"] {
	background: #334155 !important;
	color: #cbd5e1 !important;
	border-color: #475569 !important;
}

html[data-theme="dark"] .text-base.font-semibold.text-gray-800 {
	color: #f1f5f9 !important;
}

html[data-theme="dark"] .shadow-card {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Flatpickr calendar popup */
html[data-theme="dark"] .flatpickr-calendar {
	background: #1e293b !important;
	border-color: #334155 !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .flatpickr-months,
html[data-theme="dark"] .flatpickr-months .flatpickr-month,
html[data-theme="dark"] .flatpickr-weekdays,
html[data-theme="dark"] .flatpickr-days,
html[data-theme="dark"] .dayContainer {
	background: #1e293b !important;
}

html[data-theme="dark"] .flatpickr-day {
	color: #e2e8f0 !important;
}

html[data-theme="dark"] .flatpickr-day:hover,
html[data-theme="dark"] .flatpickr-day:focus {
	background: #334155 !important;
	border-color: #334155 !important;
}

html[data-theme="dark"] .flatpickr-day.selected,
html[data-theme="dark"] .flatpickr-day.startRange,
html[data-theme="dark"] .flatpickr-day.endRange {
	background: #2563eb !important;
	border-color: #2563eb !important;
	color: #fff !important;
}

html[data-theme="dark"] .flatpickr-day.today {
	border-color: #3b82f6 !important;
}

html[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
html[data-theme="dark"] .flatpickr-day.prevMonthDay,
html[data-theme="dark"] .flatpickr-day.nextMonthDay {
	color: #64748b !important;
}

html[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months,
html[data-theme="dark"] .flatpickr-current-month input.cur-year,
html[data-theme="dark"] .flatpickr-monthDropdown-month {
	background: #1e293b !important;
	color: #f1f5f9 !important;
}

html[data-theme="dark"] span.flatpickr-weekday {
	color: #94a3b8 !important;
}

html[data-theme="dark"] .flatpickr-months .flatpickr-prev-month,
html[data-theme="dark"] .flatpickr-months .flatpickr-next-month {
	color: #cbd5e1 !important;
	fill: #cbd5e1 !important;
}

html[data-theme="dark"] .flatpickr-months .flatpickr-prev-month:hover svg,
html[data-theme="dark"] .flatpickr-months .flatpickr-next-month:hover svg {
	fill: #f8fafc !important;
}

/* ========== Repair attach panels (IT + Central) — light base + dark ========== */
.attach-panel {
	border: 1px solid #e2e6f0;
	border-radius: 12px;
	background: #f8f9fc;
	padding: 14px;
}

.attach-current {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid #e2e6f0;
	border-radius: 10px;
}

.attach-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: #f0f5ff;
	color: #1e46d4;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.attach-meta { min-width: 0; flex: 1; }

.attach-name {
	font-size: 13px;
	font-weight: 600;
	color: #1c2340;
	word-break: break-all;
	line-height: 1.4;
}

.attach-hint {
	font-size: 11px;
	color: #8b93b0;
	margin-top: 2px;
}

.attach-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	flex-shrink: 0;
}

.attach-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 7px 12px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 8px;
	border: 1px solid #d8dce8;
	background: #fff;
	color: #4a5270;
	cursor: pointer;
	text-decoration: none;
	font-family: inherit;
}

.attach-btn.primary {
	background: #1e46d4;
	border-color: #1e46d4;
	color: #fff;
}

.attach-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.attach-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1.5px dashed #d8dce8;
	border-radius: 10px;
	padding: 18px 14px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
	text-align: center;
}

.attach-drop:hover,
.attach-drop.attach-drop-emphasis {
	border-color: #1e46d4;
	background: #f0f5ff;
}

.attach-selected {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border: 1px solid #c7d7ff;
	border-radius: 10px;
	padding: 12px 14px;
	background: #f0f5ff;
}

.attach-thumb {
	max-width: 100%;
	max-height: 140px;
	border-radius: 8px;
	margin-top: 10px;
	border: 1px solid #e2e6f0;
	cursor: zoom-in;
}

.attach-locked-banner {
	margin-top: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	background: #f0f5ff;
	border: 1px solid #c7d7ff;
	font-size: 12px;
	color: #1e46d4;
	font-weight: 500;
}

.attach-locked-card .attach-icon {
	background: #f0f5ff;
	color: #1e46d4;
}

.attach-locked-card .attach-name {
	color: #1e46d4;
	font-weight: 600;
}

.attach-locked-card .attach-hint {
	color: #4a5270;
}

html[data-theme="dark"] .attach-panel {
	background: #0f172a !important;
	border-color: #334155 !important;
}

html[data-theme="dark"] .attach-current {
	background: #1e293b !important;
	border-color: #334155 !important;
}

html[data-theme="dark"] .attach-icon {
	background: rgba(37, 99, 235, 0.22) !important;
	color: #93c5fd !important;
}

html[data-theme="dark"] .attach-name,
html[data-theme="dark"] .attach-panel [style*="color:#1c2340"] {
	color: #e2e8f0 !important;
}

html[data-theme="dark"] .attach-hint,
html[data-theme="dark"] .attach-panel [style*="color:#8b93b0"],
html[data-theme="dark"] .attach-panel [style*="color:#4a5270"] {
	color: #94a3b8 !important;
}

html[data-theme="dark"] .attach-btn {
	background: #1e293b !important;
	border-color: #475569 !important;
	color: #e2e8f0 !important;
}

html[data-theme="dark"] .attach-btn.primary {
	background: #2563eb !important;
	border-color: #2563eb !important;
	color: #fff !important;
}

html[data-theme="dark"] .attach-btn:disabled {
	opacity: 0.4;
}

html[data-theme="dark"] .attach-drop {
	background: #1e293b !important;
	border-color: #475569 !important;
}

html[data-theme="dark"] .attach-drop:hover,
html[data-theme="dark"] .attach-drop.attach-drop-emphasis,
html[data-theme="dark"] .attach-drop[style*="background:#f0f5ff"],
html[data-theme="dark"] .attach-drop[style*="border-color:#1e46d4"] {
	background: rgba(37, 99, 235, 0.16) !important;
	border-color: #3b82f6 !important;
}

html[data-theme="dark"] .attach-drop .material-symbols-outlined,
html[data-theme="dark"] .attach-drop [style*="color:#1e46d4"],
html[data-theme="dark"] .attach-selected .material-symbols-outlined {
	color: #93c5fd !important;
}

html[data-theme="dark"] .attach-selected {
	background: rgba(37, 99, 235, 0.16) !important;
	border-color: #3b82f6 !important;
}

html[data-theme="dark"] .attach-thumb {
	border-color: #334155 !important;
}

html[data-theme="dark"] .attach-locked-banner,
html[data-theme="dark"] .attach-panel [style*="background:#f0f5ff"][style*="border:1px solid #c7d7ff"] {
	background: rgba(37, 99, 235, 0.18) !important;
	border-color: #3b82f6 !important;
	color: #93c5fd !important;
}

html[data-theme="dark"] .attach-locked-card .attach-name,
html[data-theme="dark"] .attach-locked-card [style*="color:#1e46d4"],
html[data-theme="dark"] .attach-locked-card [style*="color:#0d7a4e"] {
	color: #93c5fd !important;
}

html[data-theme="dark"] .attach-locked-card .attach-icon,
html[data-theme="dark"] .attach-locked-card [style*="background:#f0f5ff"],
html[data-theme="dark"] .attach-locked-card [style*="background:#e6f9f0"] {
	background: rgba(37, 99, 235, 0.22) !important;
	color: #93c5fd !important;
}

/* Upload zones on create forms (IT + Central) */
html[data-theme="dark"] #file-upload-area,
html[data-theme="dark"] #file-upload-area1,
html[data-theme="dark"] #file-upload-area2,
html[data-theme="dark"] .portal-file-drop {
	background: #1e293b !important;
	border-color: #475569 !important;
}

html[data-theme="dark"] #file-upload-area:hover,
html[data-theme="dark"] #file-upload-area1:hover,
html[data-theme="dark"] #file-upload-area2:hover,
html[data-theme="dark"] .portal-file-drop:hover {
	background: rgba(37, 99, 235, 0.14) !important;
	border-color: #3b82f6 !important;
}

html[data-theme="dark"] #file-selected,
html[data-theme="dark"] #file-selected1,
html[data-theme="dark"] #file-selected2,
html[data-theme="dark"] .portal-file-selected {
	background: rgba(37, 99, 235, 0.16) !important;
	border-color: #3b82f6 !important;
}

html[data-theme="dark"] #file-name,
html[data-theme="dark"] #file-name1,
html[data-theme="dark"] #file-name2,
html[data-theme="dark"] #user-file-name {
	color: #e2e8f0 !important;
}

/* JS error highlight — keep readable in dark */
html[data-theme="dark"] #file-upload-area[style*="background: rgb(255, 245, 245)"],
html[data-theme="dark"] #file-upload-area2[style*="background: rgb(255, 245, 245)"],
html[data-theme="dark"] #file-upload-area[style*="#fff5f5"],
html[data-theme="dark"] #file-upload-area2[style*="#fff5f5"] {
	background: rgba(239, 68, 68, 0.16) !important;
	border-color: #f87171 !important;
}