.form-group input,
.form-group textarea,
.form-group select,
.form-actions button,
input, textarea, select, button, option {
	font-family: 'Vazirmatn', sans-serif !important;
}

/* Ensure dropdown options use the same font on some browsers */
select option { font-family: 'Vazirmatn', sans-serif !important; }

/* Simple modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.4); display:none; align-items:center; justify-content:center; z-index: 1000; }
.modal .modal-content { background: var(--card); color: var(--text); max-width: 900px; width: 90%; max-height: 80vh; overflow:auto; border-radius: 12px; padding: 16px; border: 1px solid var(--border); }
.modal .form-actions { text-align: left; margin-top: 12px; }
/* Reset & Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
	margin: 0;
	font-family: 'Vazirmatn', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	background: var(--bg);
	color: var(--text);
}

:root {
	/* Corporate palette */
	--brand-teal: #00BBB3;
	--brand-blue: #0365B8;
	--brand-navy: #00348C;

	/* Default: LIGHT THEME */
	--primary: var(--brand-blue);
	--primary-600: var(--brand-blue);
	--muted: #475569;
	--bg-soft: #f1f5f9;
	--bg: #f8fafc;
	--text: #0f172a;
	--card: #ffffff;
	--border: rgba(2,32,71,0.15);
	--input-bg: #ffffff;
	--danger: #ef4444;
	--warning: #f59e0b;
	--success: #10b981;
	--header-bg: #ffffff;
	--footer-bg: #ffffff;
}

/* Dark theme overrides */
.theme-dark {
	--muted: #94a3b8;
	--bg-soft: #0e1424;
	--bg: #0f172a;
	--text: #e2e8f0;
	--card: #121a2c;
	--border: rgba(0,52,140,0.35);
	--input-bg: #0b1220;
    --header-bg: linear-gradient(90deg, rgba(0,187,179,0.12), rgba(3,101,184,0.12));
	--footer-bg: #121a2c;
}

.header-content {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: space-between;
	flex-direction: row;
}

.header-logo {
	height: 32px;
	width: auto;
	object-fit: contain;
}

.app-footer { background: var(--footer-bg); border-bottom: 1px solid var(--border); }
.app-header { background: var(--header-bg); border-bottom: 1px solid var(--border); padding: 16px 20px; }
.app-header h1 { margin: 0; font-weight: 700; font-size: 20px; }

.app-footer {
	padding: 10px 20px;
	border-top: 1px solid var(--border);
	text-align: left;
	color: var(--muted);
	font-size: 12px;
}

.layout {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 16px;
	padding: 16px;
}

.sidebar {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 16px;
}
.sidebar h2 { margin: 0 0 12px; font-size: 16px; }

.form-group { margin-bottom: 12px; }
.form-group label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 13px; }
.form-group input,
.form-group select,
.form-group textarea {
	width: 100%;
	padding: 10px 12px;
	background: var(--input-bg);
	border: 1px solid var(--border);
	border-radius: 8px;
	color: var(--text);
	outline: none;
}
.form-group textarea { resize: vertical; }

/* Placeholder font family */
input::placeholder,
textarea::placeholder { font-family: 'Vazirmatn', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
/* WebKit */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { font-family: 'Vazirmatn', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
/* Edge/IE */
input:-ms-input-placeholder,
textarea:-ms-input-placeholder { font-family: 'Vazirmatn', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

.form-actions { display: flex; gap: 8px; justify-content: flex-start; margin-top: 8px; }
.btn {
	background: var(--input-bg);
	border: 1px solid var(--border);
	color: var(--text);
	padding: 10px 14px;
	border-radius: 8px;
	cursor: pointer;
	transition: all .2s ease;
	font-family: 'Vazirmatn', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.btn:hover { border-color: #475569; }
.btn-primary { background: var(--primary-600); border-color: var(--primary-600); color: #eef6ff; font-weight: 600; }
.btn-primary:hover { background: #003f8f; }
.btn-ghost { background: transparent; border-color: transparent; color: --muted; }
.btn-danger { background: #3b0a0a; border-color: #7f1d1d; color: #fecaca; }
.btn-danger:hover { background: #991b1b; }
/* New button variants */
.btn-success { background: #052e27; border-color: #14532d; color: #bbf7d0; }
.btn-success:hover { background: #166534; }
.btn-warning { background: #3a2504; border-color: #92400e; color: #fde68a; }
.btn-warning:hover { background: #b45309; }

.content {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 12px;
}
.content-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	justify-content: space-between;
	margin-bottom: 10px;
}
.content-header h2 { margin: 0; font-size: 16px; }
.content-header .tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.content-header .tools input {
	width: 260px;
	max-width: 50vw;
	padding: 10px 12px;
	background: var(--input-bg);
	border: 1px solid var(--border);
	border-radius: 8px;
	color: var(--text);
}

/* Tabs */
.tabs { display: inline-flex; gap: 6px; background: var(--input-bg); border: 1px solid var(--border); border-radius: 999px; padding: 4px; }
.tab { padding: 6px 12px; border-radius: 999px; border: 0; cursor: pointer; color: var(--muted); background: transparent; font-family: 'Vazirmatn', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.tab.active { background: var(--primary-600); color: #eef6ff; font-weight: 600; }

.table-wrapper { overflow: auto; border-radius: 10px; border: 1px solid var(--border); }
.plans-table { width: 100%; border-collapse: collapse; min-width: 900px; }
.plans-table thead th {
	background: var(--input-bg);
	position: sticky; top: 0;
	text-align: center;
	padding: 12px 10px;
	font-weight: 600; font-size: 13px; color: var(--muted);
	border-bottom: 1px solid var(--border);
}
.plans-table tbody td {
	padding: 10px;
	border-bottom: 1px solid var(--border);
	vertical-align: middle;
	font-size: 13px;
	text-align: center;
}
.row-actions { display: flex; gap: 6px; }

/* Done style */
tr.is-done td { color: #9aa5b1; text-decoration: line-through; }

.badge { display: inline-block; padding: 4px 8px; border-radius: 999px; font-size: 12px; background: rgba(3,101,184,0.08); border: 1px solid var(--border); color: var(--muted); }

/* Skeleton loading */
.skeleton { position: relative; overflow: hidden; background: var(--input-bg); border-radius: 6px; height: 12px; display: inline-block; width: 100%; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); animation: shimmer 1.2s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* Persian datepicker tune for dark */
.persian-datepicker { font-family: 'Vazirmatn', sans-serif; }
.pwt-date-input input { background: var(--input-bg) !important; color: var(--text) !important; border-color: var(--border) !important; }

/* Responsive */
@media (max-width: 1000px) {
	.layout { grid-template-columns: 1fr; }
	.content-header .tools input { width: 100%; max-width: none; }
} 

/* Mobile responsive table (cards) */
@media (max-width: 768px) {
	.plans-table thead { display: none; }
	.plans-table, .plans-table tbody, .plans-table tr, .plans-table td { display: block; width: 100%; }
	.plans-table tr { border-bottom: 1px solid var(--border); padding: 10px; }
	.plans-table td { text-align: right; padding: 6px 0; display: flex; justify-content: space-between; align-items: center; }
	.plans-table td::before { content: attr(data-label); color: #94a3b8; margin-left: 12px; }
	.row-actions { flex-wrap: wrap; gap: 6px; }
}