/* Arabic locale font: Noto Kufi Arabic Regular 400 at 21px */
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400&display=swap');

body { background: #dadada; }
.malmo-gold { color: #c19826; }
.malmo-gold-bg { background: #c19826; }
.malmo-dark-bg { background: #0f1115; }

html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea {
	font-family: "Noto Kufi Arabic", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-weight: 400;
}
html[lang="ar"] body { font-size: 90%; }

html[lang="ar"] .site-home-header {
	line-height: 180%;
}

/* Marketing homepage helpers */
.hero-bg {
	background: radial-gradient(60% 60% at 20% 0%, rgba(230, 193, 90, 0.18) 0%, rgba(230, 193, 90, 0) 60%),
							radial-gradient(40% 40% at 100% 20%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 60%),
							linear-gradient(180deg, #12141a 0%, #0f1115 100%);
}

.glass {
	background: rgba(255, 255, 255, 0.05);
	box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.06) inset, 0 8px 30px rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Tracking timeline - Centered alternating layout */
.timeline-icons { position: relative; padding: 1rem 0; margin: 0; list-style: none; }
.timeline-icons::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #d1d5db; transform: translateX(-50%); z-index: 0; height: calc(100% - 150px); top: 50px;}

.timeline-icons-item { position: relative; display: flex; align-items: flex-start; padding: 0.5rem 0; width: 100%; }
.timeline-icons-item:first-child { padding-top: 0; }
.timeline-icons-item:last-child { padding-bottom: 0; }

/* Icon container - centered */
.timeline-icon-wrap { position: absolute; left: 50%; transform: translateX(-50%); z-index: 1; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }

/* Content blocks for alternating layout */
.timeline-icons-left, .timeline-icons-right { width: calc(50% - 2rem); }
.timeline-icons-left { text-align: right; padding-right: 1rem; }
.timeline-icons-right { text-align: left; padding-left: 1rem; margin-left: auto; }

/* Odd items: content on left, empty on right */
.timeline-icons-item:nth-child(odd) .timeline-icons-left { order: 1; }
.timeline-icons-item:nth-child(odd) .timeline-icons-right { order: 2; visibility: hidden; }

/* Even items: empty on left, content on right */
.timeline-icons-item:nth-child(even) .timeline-icons-left { order: 1; visibility: hidden; }
.timeline-icons-item:nth-child(even) .timeline-icons-right { order: 2; visibility: visible; }

/* Icon colors per status */
.timeline-icon-wrap.status-processing { background: #9ca3af; color: #ffffff;}
.timeline-icon-wrap.status-pending { background: #9ca3af; }
.timeline-icon-wrap.status-confirmed { background: #3b82f6; color: #ffffff;}
.timeline-icon-wrap.status-in_transit { background: #f59e0b; color: #ffffff;}
.timeline-icon-wrap.status-received { background: #8b5cf6; color: #ffffff;}
.timeline-icon-wrap.status-received_by_agent { background: #8b5cf6; color: #ffffff;}
.timeline-icon-wrap.status-out_for_delivery { background: #f59e0b; color: #ffffff;}
.timeline-icon-wrap.status-delivered { background: #22c55e; color: #ffffff;}
.timeline-icon-wrap.status-cancelled { background: #ef4444; color: #ffffff; }

/* Content block */
.timeline-icons-time { font-size: 0.8rem; color: #6b7280; margin-bottom: 0.15rem; }
.timeline-icons-status { font-weight: 600; font-size: 0.95rem; color: #1f2937; }
.timeline-icons-location { font-size: 0.85rem; color: #4b5563; margin-top: 0.15rem; }
.timeline-icons-notes { font-size: 0.75rem; color: #9ca3af; margin-top: 0.25rem; }
.timeline-icons-delete { position: absolute; top: 0; right: 0; }

/* Tracking section in customer shipments list */
.tracking-section { width: 100%; }
@media (min-width: 768px) {
	.tracking-section {
		width: 27%;
	}
}

[dir="rtl"] #tracking-truck {
	transform: scaleX(-1);
}

/* RTL mirroring for centered alternating timeline */
[dir="rtl"] .timeline-icons-left { text-align: left; padding-left: 1rem; padding-right: 0; }
[dir="rtl"] .timeline-icons-right { text-align: right; padding-right: 1rem; padding-left: 0; margin-left: 0; margin-right: auto; }
[dir="rtl"] .timeline-icons-delete { right: auto; left: 0; }

/* Legacy timeline support (can be removed if not used elsewhere) */
.timeline { position: relative; margin-left: 0.75rem; padding-left: 1rem; }
.timeline::before { content: ""; position: absolute; left: 0.25rem; top: 0; bottom: 0; width: 2px; background: rgba(230, 193, 90, 0.5); }
.timeline-item { position: relative; padding-bottom: 0.75rem; }
.timeline-marker { position: absolute; left: -0.1rem; width: 10px; height: 10px; background: #e6c15a; border-radius: 9999px; top: 0.35rem; box-shadow: 0 0 0 2px rgba(230, 193, 90, 0.2); }
.timeline-content { margin-left: 0.75rem; }
[dir="rtl"] .timeline { margin-right: 0.75rem; padding-right: 1rem; margin-left: 0; padding-left: 0; }
[dir="rtl"] .timeline::before { right: 0.25rem; left: auto; }
[dir="rtl"] .timeline-marker { right: -0.1rem; left: auto; }
[dir="rtl"] .timeline-content { margin-right: 0.75rem; margin-left: 0; }

/* New tracking list (RTL-aware) */
.track-list{list-style:none;margin:0;padding:0;display:inline-flex;flex-direction:column;gap:.75rem}
.track-item{position:relative}
.track-step{display:flex;gap:.75rem;align-items:flex-start}
.track-body{flex:1 1 auto;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:.25rem;padding:.75rem 1rem}
.track-head{display:flex;gap:.5rem;align-items:center;justify-content:space-between}
.status-badge{display:inline-block;font-size:.75rem;line-height:1;padding:.3rem .5rem;border-radius:.5rem;background:#2a2f3a;color:#ddd;border:1px solid rgba(255,255,255,.08)}
.track-time{font-size:.75rem;color:#9aa3af}
.track-meta{margin-top:.35rem}
.track-notes{margin-top:.35rem;color:#9aa3af;font-size:.8rem}
.flag{display:inline-block;}

/* Status color accents */
.status-pending{background:#3a2f1a;color:#f1d9a6;border-color:#8a6d3b}
.status-processing{background:#3a2a1a;color:#ffd28a;border-color:#a26a2c}
.status-in_transit{background:#0f2740;color:#b9dcff;border-color:#245b8a}
.status-confirmed{background:#3a2f1a;color:#f1d9a6;border-color:#8a6d3b}
.status-received{background:#2b2140;color:#d4c2ff;border-color:#6b4fb5}
.status-received_by_agent{background:#2b2140;color:#d4c2ff;border-color:#6b4fb5}
.status-out_for_delivery{background:#1f2440;color:#c6d1ff;border-color:#4a5cc4}
.status-delivered{background:#1a3a2d;color:#b9f5cc;border-color:#2f8a5f}
.status-cancelled{background:#3a1a1a;color:#ffb9b9;border-color:#8a2c2c}

/* Cards and buttons for consistent UI */
.card { background: rgba(255,255,255,0.30); border: 1px solid rgba(255,255,255,0.38); border-radius: 0.75rem; }
.card-body { padding: 0.75rem; }
.card-header { padding: 0.5rem 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.38); display:flex; justify-content:space-between; }
.card-header:not(.items-stretch) { align-items:center; }

@media (min-width: 640px) {
	.card-body { padding: 1rem; }
	.card-header { padding: .75rem 1rem; }
}

.card .card,
.card .collapsible,
.card .collapsible[open],
.collapsible .collapsible,
.collapsible .collapsible[open] {
	 background: rgba(255,255,255,0.05);
}

.btn { display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.85rem; border-radius:.5rem; padding:.45rem .7rem; transition: all .15s ease; border:1px solid transparent; }
.btn:focus-visible { outline: 2px solid #fcd34d; outline-offset: 2px; }
.btn-gold { background:#e6c15a; color:#111827; }
.btn-gold:hover { background:#f1d488; }
.btn-gray { background:#374151; color:#fff; }
.btn-gray:hover { background:#4b5563; }
.btn-danger { background:#b91c1c; color:#fff; }
.btn-danger:hover { background:#dc2626; }
.btn-success { background:#166534; color:#fff; }
.btn-success:hover { background:#15803d; }
.btn-outline { background:transparent; color:#e6c15a; border-color:#e6c15a; }
.btn-outline:hover { background:rgba(230,193,90,0.1); }
.btn-xs { padding:.25rem .5rem; font-size:.75rem; }

/* Collapsible panels (details/summary) */
.collapsible { border:1px solid rgba(255,255,255,0.30); border-radius:.75rem; background: rgba(255,255,255,0.33); }
.collapsible summary { cursor: pointer; list-style: none; padding:.6rem .9rem; display:flex; align-items:center; justify-content:space-between; gap:.75rem; color:#e6c15a; font-weight:700; }
.collapsible summary::-webkit-details-marker { display: none; }
.collapsible[open] { background: rgba(255,255,255,0.30); }
.collapsible .collapsible-body { padding: .75rem .9rem 1rem; }
.chev { inline-size: 1em; block-size: 1em; transform: rotate(0deg); transition: transform .15s ease; }
.collapsible[open] .chev { transform: rotate(90deg); }

/* Badges (including status) */
.badge { display:inline-block; font-size:.75rem; padding:.25rem .5rem; border-radius:.5rem; border:1px solid rgba(255,255,255,0.1); color:#e5e7eb; }

/* Utility: scroll area for long lists */
.scroll-section { max-height: 22rem; overflow:auto; scrollbar-gutter: stable; }

/* Print styles - hide navigation and container padding when printing */
.no-print-container {
	padding: 1rem 0.25rem;
}

@media (min-width: 640px) {
	.no-print-container {
		padding: 1.5rem 1.5rem;
	}
}

/* Floating Action Button (FAB) */
.fab-button {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #c19826;
	color: #111827;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	z-index: 25;
	transition: all 0.2s ease;
	text-decoration: none;
}

.fab-button:hover {
	background: #d4a82a;
	transform: scale(1.05);
}

.fab-button:active {
	transform: scale(0.95);
}

.fab-button {
    @media (width >= 40rem) {
        display: none;
    }
}

[dir="rtl"] .fab-button {
	right: auto;
	left: 1.5rem;
}

@media print {
	.no-print {
		display: none !important;
	}
	.no-print-container {
		padding: 0 !important;
		margin: 0 !important;
	}
	body {
		background: white !important;
	}
}

/* ===== Sidebar Navigation ===== */
.sidebar-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 40;
	backdrop-filter: blur(2px);
}

.sidebar {
	position: fixed;
	top: 0;
	left: 0;
	width: 280px;
	height: 100vh;
	background: #1f2937;
	z-index: 50;
	transform: translateX(-100%);
	transition: transform 0.3s ease;
	display: flex;
	flex-direction: column;
	box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
}

[dir="rtl"] .sidebar {
	left: auto;
	right: 0;
	transform: translateX(100%);
}

.sidebar-open {
	transform: translateX(0) !important;
}

.sidebar-body-lock {
	overflow: hidden;
}

.sidebar-header {
	display: flex;
	padding: 0 1rem;
	height: 65px; /* Match top navbar height (h-16 = 4rem = 64px) */
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-logo img {
	height: 48px;
	width: auto;
}

.sidebar-close {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #9ca3af;
	border-radius: 8px;
	transition: all 0.15s ease;
}

.sidebar-close:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.sidebar-nav {
	flex: 1;
	overflow-y: auto;
	padding: 0.5rem 0;
}

.sidebar-section {
	padding: 0.5rem 0;
}

.sidebar-section-title {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #9ca3af;
	padding: 0.5rem 1rem;
	margin-top: 0.5rem;
}

.sidebar-link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem 1rem;
	color: #d1d5db;
	font-size: 0.9rem;
	font-weight: 500;
	transition: all 0.15s ease;
	border-left: 3px solid transparent;
	text-decoration: none;
}

[dir="rtl"] .sidebar-link {
	border-left: none;
	border-right: 3px solid transparent;
}

.sidebar-link:hover {
	background: rgba(255, 255, 255, 0.05);
	color: #fff;
}

.sidebar-link.active {
	background: rgba(193, 152, 38, 0.15);
	color: #c19826;
	border-left-color: #c19826;
}

[dir="rtl"] .sidebar-link.active {
	border-left-color: transparent;
	border-right-color: #c19826;
}

.sidebar-icon {
	width: 20px;
	text-align: center;
	font-size: 1rem;
	opacity: 0.8;
}

.sidebar-link.active .sidebar-icon {
	opacity: 1;
}

.sidebar-link-danger {
	color: #f87171;
}

.sidebar-link-danger:hover {
	background: rgba(248, 113, 113, 0.1);
	color: #fca5a5;
}

.sidebar-badge {
	margin-left: auto;
	background: #ef4444;
	color: #fff;
	font-size: 0.7rem;
	font-weight: 600;
	padding: 0.15rem 0.4rem;
	border-radius: 9999px;
	min-width: 1.25rem;
	text-align: center;
}

[dir="rtl"] .sidebar-badge {
	margin-left: 0;
	margin-right: auto;
}

.sidebar-divider {
	height: 1px;
	background: rgba(255, 255, 255, 0.1);
	margin: 0.5rem 1rem;
}

.sidebar-section-bottom {
	margin-top: auto;
}

/* Sidebar User Menu */
.sidebar-user-menu {
	margin: 0.5rem 0;
}

.sidebar-user-trigger {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	padding: 0.75rem 1rem;
	background: rgba(255, 255, 255, 0.03);
	border: none;
	cursor: pointer;
	transition: all 0.15s ease;
	text-align: left;
}

.sidebar-user-trigger:hover {
	background: rgba(255, 255, 255, 0.08);
}

.sidebar-user-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 600;
	font-size: 0.85rem;
	flex-shrink: 0;
}

.sidebar-user-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.sidebar-user-name {
	color: #f3f4f6;
	font-weight: 600;
	font-size: 0.875rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sidebar-user-email {
	color: #9ca3af;
	font-size: 0.75rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sidebar-user-chevron {
	color: #9ca3af;
	font-size: 0.7rem;
	transition: transform 0.2s ease;
}

.sidebar-user-trigger.expanded .sidebar-user-chevron {
	transform: rotate(180deg);
}

.sidebar-user-submenu {
	background: rgba(0, 0, 0, 0.15);
	border-radius: 0.5rem;
	margin: 0.25rem 0.5rem;
	overflow: hidden;
}

.sidebar-user-submenu .sidebar-link {
	padding-left: 1.25rem;
}

[dir="rtl"] .sidebar-user-submenu .sidebar-link {
	padding-left: 1rem;
	padding-right: 1.25rem;
}

/* Top navbar adjustments */
.top-navbar {
	position: sticky;
	top: 0;
	z-index: 30;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.burger-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
}

/* Main content area */
.main-content {
	transition: margin 0.3s ease;
}

/* Mobile: sidebar hidden by default */
@media (max-width: 1023px) {
	.sidebar {
		width: 100%;
		max-width: 280px;
	}
}

/* Desktop: sidebar always visible, content shifts */
@media (min-width: 1024px) {
	.sidebar {
		transform: translateX(0);
		box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
	}
	
	[dir="rtl"] .sidebar {
		transform: translateX(0);
	}
	
	.sidebar-overlay {
		display: none !important;
	}
	
	.sidebar-close {
		display: none;
	}
	
	.burger-btn {
		display: none;
	}
	
	.main-content:not(.no-sidebar .main-content) {
		margin-left: 280px;
	}
	
	[dir="rtl"] .main-content:not(.no-sidebar .main-content) {
		margin-left: 0;
		margin-right: 280px;
	}
	
	.top-navbar:not(.no-sidebar .top-navbar) {
		margin-left: 280px;
	}
	
	[dir="rtl"] .top-navbar:not(.no-sidebar .top-navbar) {
		margin-left: 0;
		margin-right: 280px;
	}
	
	/* Hide duplicate navigation tabs on desktop since sidebar handles it */
	.admin-tabs-nav {
		display: none;
	}
}

/* ===== Admin Tabs Navigation ===== */
.admin-tabs-nav {
	background: rgba(31, 41, 55, 0.95);
	border-radius: 0.75rem;
	padding: 0.25rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.admin-tabs-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba(193, 152, 38, 0.4) transparent;
}

.admin-tabs-scroll::-webkit-scrollbar {
	height: 4px;
}

.admin-tabs-scroll::-webkit-scrollbar-track {
	background: transparent;
}

.admin-tabs-scroll::-webkit-scrollbar-thumb {
	background: rgba(193, 152, 38, 0.4);
	border-radius: 4px;
}

.admin-tabs-list {
	display: flex;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: max-content;
}

.admin-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 0.9rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: #9ca3af;
	white-space: nowrap;
	border-radius: 0.5rem;
	transition: all 0.15s ease;
	text-decoration: none;
}

.admin-tab:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

.admin-tab.active {
	color: #111827;
	background: #c19826;
}

.admin-tab-icon {
	font-size: 0.9rem;
	opacity: 0.8;
}

.admin-tab.active .admin-tab-icon {
	opacity: 1;
}

/* Hide icons on smaller screens to save space */
@media (max-width: 768px) {
	.admin-tab {
		padding: 0.5rem 0.7rem;
		font-size: 0.8rem;
	}
	
	.admin-tab-icon {
		display: none;
	}
}

/* Partner navigation updates for mobile */
.partner-nav-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

/* ===== Responsive Table/Card Layout ===== */
/* Hide table on mobile, show cards */
.responsive-table {
	display: none;
}

.responsive-cards {
	display: block;
}

/* Show table on desktop, hide cards */
@media (min-width: 1024px) {
	.responsive-table {
		display: block;
	}
	
	.responsive-cards {
		display: none;
	}
}

/* Card styles for mobile data display */
.data-card {
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 0.75rem;
	padding: 1rem;
	margin-bottom: 0.75rem;
	transition: all 0.15s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.data-card:hover {
	background: rgba(255, 255, 255, 0.95);
	border-color: rgba(193, 152, 38, 0.5);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.dark .data-card {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: none;
}

.dark .data-card:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(193, 152, 38, 0.3);
}

.data-card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.data-card-title {
	font-weight: 600;
	font-size: 1rem;
	color: #92710d;
}

.dark .data-card-title {
	color: #c19826;
}

.data-card-id {
	font-family: monospace;
	font-size: 0.75rem;
	color: #333333;
	background: rgba(0, 0, 0, 0.2);
	padding: 0.15rem 0.4rem;
	border-radius: 0.25rem;
}

.data-card-body {
	display: grid;
	gap: 0.5rem;
}

.data-card-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
}

.data-card-label {
	font-size: 0.75rem;
	font-weight: 600;
	color: #6b7280;
	min-width: 80px;
}

.dark .data-card-label {
	color: #9ca3af;
}

.data-card-value {
	font-size: 0.875rem;
	color: #1f2937;
	flex: 1;
	word-break: break-word;
}

.dark .data-card-value {
	color: #e5e7eb;
}

.data-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.data-card-actions .btn,
.data-card-actions button,
.data-card-actions a {
	flex: 1 1 auto;
	min-width: 80px;
	text-align: center;
}

/* Data card form fields for inline editing */
.data-card-form {
	width: 100%;
}

.data-card-form .form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.data-card-form .form-field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.data-card-form .form-field.full-width {
	grid-column: 1 / -1;
}

.data-card-form .form-field label {
	font-size: 0.75rem;
	font-weight: 600;
	color: #6b7280;
}

.dark .data-card-form .form-field label {
	color: #9ca3af;
}

.data-card-form .form-field input,
.data-card-form .form-field select {
	width: 100%;
	padding: 0.5rem;
	font-size: 0.875rem;
	border-radius: 0.375rem;
	border: 1px solid #d1d5db;
	background: #fff;
	color: #1f2937;
}

.dark .data-card-form .form-field input,
.dark .data-card-form .form-field select {
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(0, 0, 0, 0.2);
	color: #e5e7eb;
}

.data-card-form .form-actions {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.75rem;
	grid-column: 1 / -1;
}

/* Status badges in cards */
.data-card .status-badge-sm {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.7rem;
	padding: 0.2rem 0.5rem;
	border-radius: 9999px;
	font-weight: 600;
}

.status-badge-active {
	background: rgba(34, 197, 94, 0.2);
	color: #133a22;
	border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-badge-inactive {
	background: rgba(239, 68, 68, 0.2);
	color: #532222;
	border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ===== Dialog / Modal Responsive Styles ===== */
dialog {
	border: none;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

dialog::backdrop {
	background: rgba(0, 0, 0, 0.5);
}

@media (max-width: 640px) {
	dialog {
		width: 95% !important;
		max-width: 95% !important;
		margin: 1rem auto;
		max-height: 90vh;
		overflow-y: auto;
	}
	
	dialog .p-6 {
		padding: 1rem;
	}
	
	dialog .grid {
		grid-template-columns: 1fr !important;
	}
	
	dialog .md\:col-span-2 {
		grid-column: span 1;
	}
	
	dialog .space-x-3 > * + * {
		margin-left: 0.5rem;
	}
}

.dark dialog .bg-white {
	background: #1f2937;
	color: #e5e7eb;
}

.dark dialog .border-gray-200 {
	border-color: rgba(255, 255, 255, 0.1);
}

.dark dialog .text-gray-900 {
	color: #f3f4f6;
}

.dark dialog .text-gray-700 {
	color: #d1d5db;
}

.dark dialog input,
.dark dialog select {
	background: rgba(0, 0, 0, 0.2);
	border-color: rgba(255, 255, 255, 0.2);
	color: #e5e7eb;
}