:root { 
	--bg: #0b0b0b; 
	--card: #111; 
	--muted: #777; 
	--text: #eee; 
	--accent: #fff; 
	--border: #222; 
	--danger: #ff5252; 
	--success: #4caf50;
	--warning: #ff9800;
}

* { box-sizing: border-box; }

body { 
	font-family: 'Noto Kufi Arabic', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; 
	margin: 0; 
	padding: 0; 
	background: var(--bg); 
	color: var(--text); 
	direction: rtl;
}

header {
	background: white;
	padding: 10px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
	border-bottom: 8px solid #000;
	position: relative;
}

.logo {
	display: flex;
	align-items: center;
	gap: 12px;
	position: relative;
	z-index: 1;
}

.logo-icon {
	width: 360px;
	height: 360px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
	z-index: 2;
	margin-bottom: -120px;
	margin-top: -100px;
}

.logo-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}



header a { 
	color: #000; 
	opacity: 0.8; 
	margin-right: 12px; 
	text-decoration: none; 
	transition: opacity 0.2s;
	font-weight: 500;
}

header a:hover { 
	opacity: 1; 
}

main { 
	padding: 24px; 
	max-width: 1200px; 
	margin: 0 auto; 
}

.card { 
	background: var(--card); 
	padding: 24px; 
	border-radius: 12px; 
	box-shadow: 0 0 0 1px var(--border); 
	margin-bottom: 16px; 
}

.card h1 {
	margin: 0 0 20px 0;
	font-size: 24px;
	font-weight: 600;
	color: var(--accent);
}

.success-icon {
	font-size: 48px;
	text-align: center;
	margin-bottom: 16px;
}

label { 
	display: block; 
	margin-bottom: 8px; 
	color: var(--muted); 
	font-size: 12px; 
	text-transform: uppercase; 
	letter-spacing: 0.04em; 
	font-weight: 500;
}

input, select { 
	width: 100%; 
	padding: 12px 14px; 
	background: #0b0b0b; 
	color: var(--text); 
	border: 1px solid var(--border); 
	border-radius: 10px; 
	margin-top: 6px; 
	font-family: inherit;
	transition: border-color 0.2s;
}

input:focus, select:focus {
	outline: none;
	border-color: var(--accent);
}

input::placeholder { 
	color: #555; 
}

button, .button { 
	background: var(--accent); 
	color: var(--bg); 
	border: 1px solid var(--accent); 
	padding: 12px 20px; 
	border-radius: 8px; 
	cursor: pointer; 
	text-decoration: none; 
	display: inline-block; 
	font-weight: 600; 
	font-family: inherit;
	transition: all 0.2s;
	font-size: 14px;
}

button:hover, .button:hover { 
	filter: brightness(0.9); 
	transform: translateY(-1px);
}

.button.secondary { 
	background: transparent; 
	color: var(--text); 
	border-color: var(--border); 
}

.button.secondary:hover { 
	background: #0b0b0b; 
	border-color: var(--accent);
}

button.danger, .danger { 
	background: transparent; 
	color: var(--danger); 
	border: 1px solid var(--danger); 
}

button.danger:hover, .danger:hover {
	background: var(--danger);
	color: var(--bg);
}

.small-button { 
	padding: 6px 12px; 
	font-size: 11px; 
	border-radius: 6px; 
	font-weight: 500;
}

.alert { 
	background: #2a0f0f; 
	color: #ffaaaa; 
	padding: 12px 16px; 
	border-radius: 10px; 
	margin-bottom: 12px; 
	border: 1px solid #3a1f1f; 
}

.success { 
	background: #0f2a18; 
	color: #aaffcc; 
	padding: 12px 16px; 
	border-radius: 10px; 
	margin-top: 12px; 
	border: 1px solid #1f3a28; 
	text-align: center;
}

.success-message {
	background: #0f1f2a;
	color: #aad4ff;
	padding: 12px 16px;
	border-radius: 10px;
	margin-top: 12px;
	margin-bottom: 12px;
	border: 1px solid #1f2f3a;
	text-align: center;
	font-weight: 500;
}

.info { 
	background: #0f1f2a; 
	color: #aad4ff; 
	padding: 12px 16px; 
	border-radius: 10px; 
	margin-top: 12px; 
	border: 1px solid #1f2f3a; 
}

.table-container { 
	overflow-x: auto; 
	background: var(--card); 
	border-radius: 12px; 
	box-shadow: 0 0 0 1px var(--border); 
}

.table { 
	width: 100%; 
	border-collapse: collapse; 
	background: var(--card); 
	border-radius: 12px; 
	overflow: hidden; 
}

.table th, .table td { 
	padding: 12px 14px; 
	border-bottom: 1px solid var(--border); 
	text-align: right; 
}

.table th { 
	color: var(--muted); 
	font-weight: 600; 
	font-size: 12px; 
	text-transform: uppercase; 
	letter-spacing: 0.04em; 
	background: #0e0e0e; 
	position: sticky;
	top: 0;
}

.badge { 
	padding: 6px 10px; 
	border-radius: 999px; 
	font-size: 11px; 
	border: 1px solid var(--border); 
	background: #0b0b0b; 
	color: var(--text); 
	font-weight: 500;
}

.badge-success { 
	border-color: var(--success); 
	color: #9ff7b8; 
	background: rgba(76, 175, 80, 0.1);
}

.badge-gray { 
	border-color: #333; 
	color: #bbb; 
}

.badge-warn { 
	border-color: var(--warning); 
	color: #ffe8a3; 
	background: rgba(255, 152, 0, 0.1);
}

.badge-car { 
	border-color: #3b82f6; 
	color: #93c5fd; 
}

.actions { 
	display: flex; 
	gap: 10px; 
	align-items: center; 
	margin-top: 20px;
}

.row-actions { 
	display: flex; 
	gap: 6px; 
	align-items: center; 
	flex-wrap: wrap; 
}

.row-actions form { 
	display: inline; 
	margin: 0; 
}

.inline { 
	display: inline; 
}

.inline-form { 
	display: flex; 
	gap: 4px; 
	align-items: center; 
}

.datetime-input { 
	width: auto; 
	padding: 4px 8px; 
	font-size: 11px; 
	border-radius: 4px; 
	margin: 0; 
}

.grid { 
	display: grid; 
	grid-template-columns: repeat(2, minmax(0, 1fr)); 
	gap: 16px; 
}

.field { 
	display: flex; 
	flex-direction: column; 
	margin-bottom: 16px;
}

.filters { 
	display: flex; 
	gap: 10px; 
	align-items: center; 
	flex-wrap: wrap; 
	margin-bottom: 16px;
}

.counts { 
	display: flex; 
	gap: 16px; 
	flex-wrap: wrap; 
	color: var(--muted); 
	font-size: 12px;
}

.counts strong {
	color: var(--accent);
}

.whatsapp-section {
	margin-top: 20px;
	text-align: center;
}

.whatsapp-section p {
	margin-bottom: 12px;
	color: var(--muted);
	font-size: 14px;
}

.payment-link {
	margin-bottom: 20px;
}

.whatsapp-actions {
	margin-top: 16px;
}

.whatsapp-button {
	background: #25D366;
	border-color: #25D366;
	color: var(--bg);
}

.whatsapp-button:hover {
	background: #128C7E;
	border-color: #128C7E;
}

.payment-options {
	margin-top: 20px;
	text-align: center;
}

.payment-options h2 {
	margin-bottom: 16px;
	color: var(--accent);
	font-size: 18px;
}

.payment-buttons {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.cash-button {
	background: var(--success);
	border-color: var(--success);
}

.cash-button:hover {
	background: #45a049;
	border-color: #45a049;
}

.card-button {
	background: #2196F3;
	border-color: #2196F3;
}

.card-button:hover {
	background: #1976D2;
	border-color: #1976D2;
}

.car-button {
	background: var(--warning);
	border-color: var(--warning);
	color: var(--bg);
}

.car-button:hover {
	background: #F57C00;
	border-color: #F57C00;
}

.cash-approval-section {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--border);
}

.cash-approval-section h3 {
	margin: 0 0 16px 0;
	color: var(--accent);
	font-size: 16px;
	font-weight: 600;
}

.quick-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.quick-actions form {
	margin: 0;
}

/* Stats Grid */
.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.stat-card {
	background: var(--card);
	padding: 20px;
	border-radius: 12px;
	text-align: center;
	border: 1px solid var(--border);
}

.stat-number {
	font-size: 32px;
	font-weight: 700;
	color: var(--accent);
	margin-bottom: 8px;
}

.stat-label {
	font-size: 12px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Filter Groups */
.filter-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.filters {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 16px;
	align-items: end;
}

/* Entries Container */
.entries-container {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.entry-card {
	background: var(--card);
	border-radius: 12px;
	padding: 20px;
	border: 1px solid var(--border);
}

.entry-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 16px;
	gap: 16px;
}

.entry-info h3 {
	margin: 0 0 8px 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--accent);
}

.plate-number {
	margin: 0 0 4px 0;
	font-size: 14px;
	color: var(--text);
	font-weight: 500;
}

.phone-number {
	margin: 0;
	font-size: 14px;
}

.phone-number a {
	color: var(--accent);
	text-decoration: none;
}

.entry-status {
	flex-shrink: 0;
}

.entry-details {
	margin-bottom: 16px;
}

.detail-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.detail-row:last-child {
	border-bottom: none;
}

.detail-label {
	font-size: 12px;
	color: var(--muted);
	font-weight: 500;
}

.detail-value {
	font-size: 14px;
	color: var(--text);
}

.entry-actions {
	border-top: 1px solid var(--border);
	padding-top: 16px;
}

.action-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-start;
}

/* Empty State */
.empty-state {
	text-align: center;
	padding: 60px 20px;
	background: var(--card);
	border-radius: 12px;
	border: 1px solid var(--border);
}

.empty-icon {
	font-size: 48px;
	margin-bottom: 16px;
}

.empty-state h3 {
	margin: 0 0 8px 0;
	color: var(--accent);
	font-size: 20px;
}

.empty-state p {
	margin: 0 0 20px 0;
	color: var(--muted);
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	
	.stat-card {
		padding: 16px;
	}
	
	.stat-number {
		font-size: 24px;
	}
	
	.filters {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	
	.filter-group {
		flex-direction: column;
	}
	
	.entry-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	
	.entry-status {
		align-self: flex-start;
	}
	
	.detail-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	
	.action-buttons {
		flex-direction: column;
		align-items: stretch;
	}
	
	.action-buttons .button,
	.action-buttons .small-button {
		width: 100%;
		justify-content: center;
	}
	
	.inline-form {
		flex-direction: column;
		gap: 8px;
	}
	
	.datetime-input {
		width: 100%;
	}
}

@media (max-width: 768px) {
	/* Header adjustments */
	header {
		padding: 10px 15px;
		flex-direction: column;
		gap: 10px;
		align-items: stretch;
	}

	.logo-icon {
		width: 60px;
		height: 60px;
	}

	.logo-icon img {
		width: 50px;
		height: 50px;
	}

	nav {
		justify-content: center;
	}

	nav a {
		padding: 8px 16px;
		font-size: 14px;
	}

	/* Container adjustments */
	.container {
		padding: 15px;
		margin: 10px;
		max-width: 100%;
	}

	/* Card adjustments */
	.card {
		padding: 20px 15px;
		margin: 0;
	}

	.card h1 {
		font-size: 1.8rem;
		margin-bottom: 20px;
	}

	/* Form adjustments */
	.field {
		margin-bottom: 15px;
	}

	.field label {
		font-size: 14px;
		margin-bottom: 5px;
		display: block;
	}

	.field input,
	.field select {
		width: 100%;
		padding: 12px;
		font-size: 16px; /* Prevents zoom on iOS */
	}

	.field input:focus,
	.field select:focus {
		outline: none;
		border-color: #007bff;
	}

	/* Button adjustments */
	.button {
		width: 100%;
		padding: 12px;
		font-size: 16px;
		margin-top: 10px;
	}

	/* Stats grid */
	.stats-grid {
		grid-template-columns: 1fr;
		gap: 15px;
	}

	.stat-card {
		padding: 15px;
	}

	.stat-number {
		font-size: 2rem;
	}

	.stat-label {
		font-size: 0.9rem;
	}

	/* Entry cards */
	.entry-card {
		padding: 15px;
		margin: 0 0 10px 0;
	}

	.entry-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.entry-title {
		font-size: 16px;
	}

	.status-badge {
		font-size: 11px;
		padding: 4px 8px;
	}

	.entry-type-badge {
		font-size: 11px;
		padding: 3px 6px;
		margin: 2px 0;
	}

	.entry-details {
		font-size: 13px;
		gap: 5px;
	}

	.entry-actions {
		flex-direction: column;
		gap: 5px;
		margin-top: 10px;
	}

	.entry-actions .button {
		width: 100%;
		padding: 8px 12px;
		font-size: 14px;
	}

	/* Action buttons */
	.action-buttons {
		flex-direction: column;
		gap: 5px;
	}

	.action-buttons .button {
		width: 100%;
		padding: 8px 12px;
		font-size: 12px;
	}

	/* Filters */
	.filters {
		flex-direction: column;
		gap: 10px;
		padding: 15px;
	}

	.filter-row {
		flex-direction: column;
		gap: 10px;
	}

	.filter-group {
		width: 100%;
	}

	.filter-group input,
	.filter-group select {
		width: 100%;
		padding: 10px;
		font-size: 16px;
	}

	.filter-group label {
		font-size: 14px;
		margin-bottom: 5px;
		display: block;
	}

	/* Alert adjustments */
	.alert {
		padding: 12px;
		margin-bottom: 15px;
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	/* Very small screens */
	.container {
		padding: 10px;
		margin: 5px;
	}

	.card {
		padding: 15px 10px;
	}

	.card h1 {
		font-size: 1.5rem;
		margin-bottom: 15px;
	}

	.field input,
	.field select {
		padding: 10px;
		font-size: 14px;
	}

	.button {
		padding: 10px;
		font-size: 14px;
	}

	.stats-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.stat-card {
		padding: 12px;
	}

	.stat-number {
		font-size: 1.8rem;
	}

	.stat-label {
		font-size: 0.8rem;
	}

	.entry-card {
		padding: 12px;
	}

	.entry-title {
		font-size: 14px;
	}

	.entry-details {
		font-size: 12px;
	}

	.entry-actions .button {
		padding: 6px 10px;
		font-size: 12px;
	}

	.action-buttons {
		gap: 4px;
	}

	.action-buttons .button {
		padding: 6px 10px;
		font-size: 11px;
	}

	.filters {
		padding: 10px;
	}

	.filter-group input,
	.filter-group select {
		padding: 8px;
		font-size: 14px;
	}

	.alert {
		padding: 10px;
		font-size: 13px;
	}
}

/* Phone Input Styles */
.phone-input-container {
	display: flex;
	align-items: center;
	border: 2px solid #ddd;
	border-radius: 8px;
	background: white;
	overflow: hidden;
	flex-direction: row-reverse; /* RTL layout - prefix on right */
}

.phone-prefix {
	background: #f8f9fa;
	color: #666;
	padding: 12px 16px;
	font-weight: 600;
	border-right: 1px solid #ddd; /* Border on right side for RTL */
	font-size: 1rem;
}

.phone-input {
	flex: 1;
	border: none !important;
	padding: 12px 16px !important;
	font-size: 1rem;
	outline: none;
	text-align: right; /* Right-align text for RTL */
}

.phone-input:focus {
	border: none !important;
	box-shadow: none !important;
}

.phone-input-container:focus-within {
	border-color: #4CAF50;
	box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

.phone-help-text {
	display: block;
	margin-top: 6px;
	color: #666;
	font-size: 0.85rem;
	font-style: italic;
}

/* Mobile adjustments for phone input */
@media (max-width: 768px) {
	.phone-prefix {
		padding: 10px 12px;
		font-size: 0.9rem;
	}
	
	.phone-input {
		padding: 10px 12px !important;
		font-size: 0.9rem;
	}
	
	.phone-help-text {
		font-size: 0.8rem;
	}
}

@media (max-width: 480px) {
	.phone-prefix {
		padding: 8px 10px;
		font-size: 0.85rem;
	}
	
	.phone-input {
		padding: 8px 10px !important;
		font-size: 0.85rem;
	}
	
	.phone-help-text {
		font-size: 0.75rem;
	}
}