/* Shared primitives for Tawasul pages and application. Logical properties only, so RTL works from one stylesheet. */

*,
*::before,
*::after { box-sizing: border-box; }

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

body.tawasul-app-body {
	margin: 0;
	background: var(--tk-surface);
	color: var(--tk-text);
	font-family: var(--tk-font-body);
	font-size: 16px;
	line-height: 1.6;
}

.tk-shell {
	width: min(100% - 40px, var(--tk-shell));
	margin-inline: auto;
}

.tk-shell-narrow { max-width: 780px; }

.tk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var(--tk-r-pill);
	border: 1px solid transparent;
	font-family: var(--tk-font-display);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}

.tk-btn:hover { transform: translateY(-1px); }
.tk-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.tk-btn-primary {
	background: var(--tk-green);
	color: var(--tk-ink);
}
.tk-btn-primary:hover { background: var(--tk-green-dark); color: var(--tk-on-ink); }

.tk-btn-ghost {
	background: transparent;
	color: inherit;
	border-color: currentColor;
	opacity: .85;
}
.tk-btn-ghost:hover { opacity: 1; }

.tk-btn-ink { background: var(--tk-ink); color: var(--tk-on-ink); }
.tk-btn-quiet { background: var(--tk-surface-2); color: var(--tk-text); }
.tk-btn-danger { background: var(--tk-danger-soft); color: var(--tk-danger); }

.tk-btn-sm { padding: 8px 14px; font-size: 13px; }

.tk-card {
	background: var(--tk-card);
	border: 1px solid var(--tk-surface-3);
	border-radius: var(--tk-r-md);
	padding: var(--tk-s-4);
	box-shadow: var(--tk-shadow-1);
}

.tk-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: var(--tk-r-pill);
	background: var(--tk-accent);
	color: var(--tk-ink);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
}

.tk-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: var(--tk-r-pill);
	font-size: 12px;
	font-weight: 600;
	background: var(--tk-surface-2);
	color: var(--tk-text-soft);
	white-space: nowrap;
}

.tk-pill-green { background: var(--tk-green-soft); color: var(--tk-green); }
.tk-pill-warn  { background: var(--tk-warn-soft); color: var(--tk-warn); }
.tk-pill-danger{ background: var(--tk-danger-soft); color: var(--tk-danger); }
.tk-pill-info  { background: var(--tk-info-soft); color: var(--tk-info); }

.tk-field { display: grid; gap: 6px; margin-block-end: var(--tk-s-3); }
.tk-field > label {
	font-size: 13px;
	font-weight: 600;
	color: var(--tk-text-soft);
	letter-spacing: .01em;
}

.tk-input,
.tk-select,
.tk-textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--tk-surface-3);
	border-radius: var(--tk-r-sm);
	background: var(--tk-field);
	color: var(--tk-text);
	font: inherit;
	font-size: 15px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.tk-input:focus,
.tk-select:focus,
.tk-textarea:focus {
	outline: none;
	border-color: var(--tk-green);
	box-shadow: 0 0 0 3px rgba(169, 179, 191, .18);
}

.tk-textarea { min-height: 110px; resize: vertical; }

.tk-alert {
	padding: 12px 16px;
	border-radius: var(--tk-r-sm);
	font-size: 14px;
	margin-block-end: var(--tk-s-3);
	border-inline-start: 3px solid;
}
.tk-alert-info { background: var(--tk-info-soft); border-color: var(--tk-info); color: var(--tk-info); }
.tk-alert-warn { background: var(--tk-warn-soft); border-color: var(--tk-warn); color: var(--tk-warn); }
.tk-alert-danger { background: var(--tk-danger-soft); border-color: var(--tk-danger); color: var(--tk-danger); }
.tk-alert-green { background: var(--tk-green-soft); border-color: var(--tk-green); color: var(--tk-green-dark); }

.tk-muted { color: var(--tk-text-soft); font-size: 14px; }
.tk-tiny { color: var(--tk-text-faint); font-size: 12.5px; }
.tk-hidden { display: none !important; }

.tk-spinner {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--tk-surface-3);
	border-top-color: var(--tk-green);
	animation: tk-spin .7s linear infinite;
	display: inline-block;
}

@keyframes tk-spin { to { transform: rotate(360deg); } }

.tk-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
}
.tk-table th,
.tk-table td {
	padding: 11px 12px;
	text-align: start;
	border-block-end: 1px solid var(--tk-surface-3);
	vertical-align: middle;
}
.tk-table th {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--tk-text-faint);
	font-weight: 700;
}
.tk-table tbody tr:hover { background: var(--tk-surface-2); }

.tk-empty {
	padding: var(--tk-s-6) var(--tk-s-4);
	text-align: center;
	color: var(--tk-text-soft);
}
.tk-empty h3 { margin: 0 0 6px; font-family: var(--tk-font-display); color: var(--tk-text); }

.tk-app-loading {
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: var(--tk-text-soft);
	font-family: var(--tk-font-display);
}

@media (max-width: 720px) {
	.tk-shell { width: min(100% - 28px, var(--tk-shell)); }
}