/* ==========================================================================
   RX Manager design tokens — warm, mobile-first, RTL/LTR aware.
   Light palette on :root, dark palette on body[data-theme="dark"].
   ========================================================================== */

:root {
	--bg: #fcf7f1;
	--bg-soft: #f5ede3;
	--surface: #ffffff;
	--surface-2: #f5ede3;
	--text: #2c2420;
	--text-muted: #85766c;
	--text-faint: #b4a79c;
	--border: #e9ddcf;
	--shadow: 0 10px 30px rgba(44, 36, 32, 0.08);

	--honey: #c97f1e;
	--honey-rgb: 201, 127, 30;
	--honey-ink: #7a4c10;
	--honey-soft: #f6e4c4;
	--sage: #4c7a67;
	--sage-ink: #2e4c40;
	--sage-soft: #dceae2;
	--brick: #b24b37;
	--brick-ink: #7c2f21;
	--brick-soft: #f5ded7;

	--radius-lg: 1.1rem;
	--radius-md: 0.85rem;
	--radius-pill: 999px;

	--font-fa: "Vazir", Tahoma, sans-serif;
	--font-en: "Inter", "Segoe UI", Tahoma, sans-serif;
}

body[data-theme="dark"] {
	--bg: #14161a;
	--bg-soft: #191c21;
	--surface: #1c1f24;
	--surface-2: #191c21;
	--text: #eef1f4;
	--text-muted: #99a2ac;
	--text-faint: #626b75;
	--border: #2c3138;
	--shadow: 0 16px 40px rgba(0, 0, 0, 0.4);

	--honey: #5b9bd5;
	--honey-rgb: 91, 155, 213;
	--honey-ink: #8ec0ea;
	--honey-soft: #1b2b3a;
	--sage: #4fb888;
	--sage-ink: #8cdcb7;
	--sage-soft: #16332a;
	--brick: #e0685a;
	--brick-ink: #f0968a;
	--brick-soft: #3a201c;
}

/* ==========================================================================
   Base
   ========================================================================== */

html,
body {
	min-height: 100%;
}

body {
	background: var(--bg);
	color: var(--text);
}

body.rtl {
	font-family: var(--font-fa);
}

body.ltr {
	font-family: var(--font-en);
}

a {
	color: var(--honey-ink);
}

a:hover {
	color: var(--honey);
}

::selection {
	background: var(--honey-soft);
	color: var(--honey-ink);
}

.text-muted {
	color: var(--text-muted) !important;
}

.card,
.table,
.form-label,
.dropdown-item,
.form-check-label,
dt,
dd,
.navbar-brand,
.nav-link,
.btn,
.alert,
.list-group-item {
	color: var(--text);
}

/* ==========================================================================
   Bootstrap re-tint — the app's primary/success/danger map to the warm
   palette instead of Bootstrap's stock blue/green/red.
   ========================================================================== */

.btn-primary,
.btn-outline-primary:hover {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--honey);
	--bs-btn-border-color: var(--honey);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--honey-ink);
	--bs-btn-hover-border-color: var(--honey-ink);
	--bs-btn-active-bg: var(--honey-ink);
	--bs-btn-active-border-color: var(--honey-ink);
	--bs-btn-disabled-bg: var(--honey);
	--bs-btn-disabled-border-color: var(--honey);
	--bs-btn-focus-shadow-rgb: 201, 127, 30;
}

.btn-outline-primary {
	--bs-btn-color: var(--honey-ink);
	--bs-btn-border-color: var(--honey);
	--bs-btn-hover-bg: var(--honey);
	--bs-btn-hover-border-color: var(--honey);
	--bs-btn-active-bg: var(--honey);
	--bs-btn-active-border-color: var(--honey);
}

.btn-success {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--sage);
	--bs-btn-border-color: var(--sage);
	--bs-btn-hover-bg: var(--sage-ink);
	--bs-btn-hover-border-color: var(--sage-ink);
	--bs-btn-active-bg: var(--sage-ink);
	--bs-btn-active-border-color: var(--sage-ink);
	--bs-btn-disabled-bg: var(--sage);
	--bs-btn-disabled-border-color: var(--sage);
}

.btn-outline-danger {
	--bs-btn-color: var(--brick);
	--bs-btn-border-color: var(--brick);
	--bs-btn-hover-bg: var(--brick);
	--bs-btn-hover-border-color: var(--brick);
	--bs-btn-active-bg: var(--brick);
	--bs-btn-active-border-color: var(--brick);
}

.btn-outline-secondary {
	--bs-btn-color: var(--text-muted);
	--bs-btn-border-color: var(--border);
	--bs-btn-hover-color: var(--text);
	--bs-btn-hover-bg: var(--bg-soft);
	--bs-btn-hover-border-color: var(--border);
	--bs-btn-active-color: var(--text);
	--bs-btn-active-bg: var(--bg-soft);
	--bs-btn-active-border-color: var(--border);
}

.btn-outline-dark {
	--bs-btn-color: var(--text);
	--bs-btn-border-color: var(--border);
	--bs-btn-hover-bg: var(--text);
	--bs-btn-hover-border-color: var(--text);
}

.btn,
.form-control,
.form-select {
	border-radius: var(--radius-md);
}

.btn {
	font-weight: 600;
}

.btn-lg {
	border-radius: var(--radius-lg);
}

.badge.bg-primary,
.bg-primary {
	background-color: var(--honey) !important;
}

.badge.bg-success,
.bg-success {
	background-color: var(--sage) !important;
}

.badge.bg-danger,
.bg-danger {
	background-color: var(--brick) !important;
}

.form-check-input:checked {
	background-color: var(--honey);
	border-color: var(--honey);
}

.form-check-input:focus {
	border-color: var(--honey);
	box-shadow: 0 0 0 0.2rem rgba(var(--honey-rgb), 0.18);
}

.page-link {
	color: var(--honey-ink);
}

.page-item.active .page-link {
	background-color: var(--honey);
	border-color: var(--honey);
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
	color: var(--honey-ink);
	background: var(--honey-soft);
	border-color: transparent;
}

/* ==========================================================================
   Surfaces
   ========================================================================== */

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
}

.card-body {
	padding: 1.25rem;
}

.form-control,
.form-select {
	background: var(--surface-2);
	border-color: var(--border);
	color: var(--text);
}

.form-control:focus,
.form-select:focus {
	background: var(--surface);
	color: var(--text);
	border-color: var(--honey);
	box-shadow: 0 0 0 0.2rem rgba(var(--honey-rgb), 0.15);
}

.dropdown-menu,
.list-group-item,
.modal-content {
	background: var(--surface);
	border-color: var(--border);
	color: var(--text);
}

.modal-backdrop.show {
	background: rgba(44, 36, 32, 0.36);
}

.alert {
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
}

.alert-success {
	background: var(--sage-soft);
	color: var(--sage-ink);
	border-color: transparent;
}

.alert-danger {
	background: var(--brick-soft);
	color: var(--brick-ink);
	border-color: transparent;
}

.table td,
.table th {
	vertical-align: middle;
}

.table > :not(caption) > * > * {
	padding: 0.9rem 0.75rem;
	background: transparent;
	color: var(--text);
}

.table-responsive {
	border-radius: var(--radius-md);
}

/* ==========================================================================
   App shell — sidebar + top area, replacing the old top navbar.
   ========================================================================== */

.app-shell {
	display: flex;
	min-height: 100vh;
	align-items: stretch;
}

.app-sidebar {
	width: 15.5rem;
	flex-shrink: 0;
	background: var(--surface);
	border-inline-end: 1px solid var(--border);
	padding: 1.4rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
}

.sidebar-brand {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0 0.4rem;
	text-decoration: none;
}

.sidebar-brand-mark {
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 0.65rem;
	background: var(--honey);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.82rem;
	flex-shrink: 0;
}

.sidebar-brand-name {
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--text);
}

.sidebar-nav {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	flex: 1;
	overflow-y: auto;
}

.sidebar-nav-group {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.sidebar-nav-heading {
	padding: 0 0.85rem;
	margin-bottom: 0.15rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--text-faint);
}

.sidebar-nav-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.55rem 0.85rem;
	border-radius: var(--radius-md);
	color: var(--text-muted);
	font-weight: 600;
	font-size: 0.88rem;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-nav-item svg {
	flex-shrink: 0;
	width: 1.1rem;
	height: 1.1rem;
	opacity: 0.75;
	transition: opacity 0.15s ease;
}

.sidebar-nav-item:hover {
	background: var(--bg-soft);
	color: var(--text);
}

.sidebar-nav-item:hover svg {
	opacity: 1;
}

.sidebar-nav-item.active {
	background: var(--honey-soft);
	color: var(--honey-ink);
}

.sidebar-nav-item.active svg {
	opacity: 1;
}

.sidebar-nav-item.active::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.3rem;
	bottom: 0.3rem;
	width: 3px;
	border-radius: 999px;
	background: var(--honey);
}

.sidebar-nav-badge {
	margin-inline-start: auto;
}

.sidebar-user {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem;
	border-radius: var(--radius-md);
	background: var(--bg-soft);
}

.sidebar-user-avatar {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--sage-soft);
	color: var(--sage-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.75rem;
	flex-shrink: 0;
}

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

.sidebar-user-role {
	font-size: 0.72rem;
	color: var(--text-faint);
}

.app-topbar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	flex-wrap: wrap;
	padding: 0.9rem 1.25rem;
	border-bottom: 1px solid var(--border);
	background: var(--surface);
}

.app-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.app-main > main {
	flex: 1;
}

.sidebar-toggle {
	display: none;
}

.sidebar-backdrop {
	display: none;
}

@media (max-width: 991.98px) {
	.app-sidebar {
		position: fixed;
		inset-inline-start: 0;
		top: 0;
		bottom: 0;
		z-index: 1040;
		transform: translateX(-100%);
		transition: transform 0.2s ease;
		box-shadow: var(--shadow);
	}

	body.rtl .app-sidebar {
		transform: translateX(100%);
	}

	.app-sidebar.open,
	body.rtl .app-sidebar.open {
		transform: translateX(0);
	}

	.sidebar-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
	}

	/* Dims and blocks the page behind the open sidebar — without this, a
	   successful tap on the toggle has no visible confirmation beyond the
	   panel itself sliding in, which reads as "nothing happened" at a
	   glance. Also doubles as the tap-to-close target. */
	.sidebar-backdrop.open {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1039;
		background: rgba(28, 22, 16, 0.45);
	}

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

/* ==========================================================================
   Stat cards, chips, table actions
   ========================================================================== */

.stat-card .display-6 {
	font-weight: 700;
	line-height: 1;
}

.stat-label {
	font-size: 0.85rem;
	color: var(--text-muted);
	margin-bottom: 0.4rem;
}

/* Permission / option toggle cards (roles form, etc.) — a plain bordered
   .form-check lights up like a chip once its checkbox is checked. */
.form-check.border {
	transition: background 0.12s, border-color 0.12s;
}

.form-check.border:has(.form-check-input:checked) {
	background: var(--honey-soft);
	border-color: var(--honey) !important;
}

.icon-btn svg {
	vertical-align: -0.15em;
}

.avatar-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background: var(--sage-soft);
	color: var(--sage-ink);
	font-weight: 700;
	font-size: 0.78rem;
	flex-shrink: 0;
}

.page-eyebrow {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--text-faint);
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.65rem;
	border-radius: var(--radius-pill);
	font-size: 0.72rem;
	font-weight: 700;
	background: var(--sage-soft);
	color: var(--sage-ink);
}

.chip-muted {
	background: var(--bg-soft);
	color: var(--text-muted);
}

.attention-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.8rem 0.9rem;
	border-radius: var(--radius-md);
}

.attention-row.is-queue {
	background: var(--brick-soft);
}

.attention-row-icon {
	flex-shrink: 0;
	display: flex;
}

/* Practice mode — deliberately loud (brick, not the friendly honey accent)
   so it reads as "pay attention" rather than blending in like a normal
   banner. The whole point is that it must never be mistaken for real data. */
.practice-banner {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 1.25rem;
	background: var(--brick);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
}

.practice-banner a {
	color: #fff;
	text-decoration: underline;
	margin-inline-start: auto;
	flex-shrink: 0;
}

.table-actions {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
}

body.rtl .navbar-nav {
	padding-right: 0;
}

/* ==========================================================================
   Prescription form — dynamic rows, mobile-first (44px touch targets kept).
   ========================================================================== */

.medicine-row .form-control,
.medicine-row .form-select,
.prescription-form .form-control,
.prescription-form .form-select,
.mobile-submit,
.select2-container--bootstrap-5 .select2-selection {
	min-height: 44px;
}

.medicine-rows,
#sample-rows {
	overflow-x: hidden;
}

.medicine-row {
	border-radius: var(--radius-md);
}

.quick-medicine-chip {
	--bs-btn-padding-y: 0.3rem;
	--bs-btn-padding-x: 0.75rem;
	--bs-btn-font-size: 0.82rem;
}

/* Keep Save reachable on a long prescription without scrolling to the very
   bottom — the form can grow to many medicine rows on mobile. */
@media (max-width: 767.98px) {
	.prescription-save-bar {
		position: sticky;
		bottom: 0;
		margin-left: -0.85rem;
		margin-right: -0.85rem;
		padding: 0.75rem 0.85rem calc(0.75rem + env(safe-area-inset-bottom));
		background: var(--surface);
		border-top: 1px solid var(--border);
		box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.06);
	}
}

.shamsi-date {
	direction: ltr;
	text-align: left;
	font-family: var(--font-en);
}

/* jalaliDatePicker renders a <jdp-container> custom element with its own
   hardcoded light palette (--jdp-color-0 through -5) — remap those tokens
   under dark mode the same way as the select2 overrides below. */
body[data-theme="dark"] jdp-container {
	--jdp-color-0: var(--surface);
	--jdp-color-1: var(--surface-2);
	--jdp-color-2: var(--border);
	--jdp-color-3: var(--text-faint);
	--jdp-color-4: var(--text-muted);
	--jdp-color-5: var(--text);
	--jdp-primary: var(--honey);
}

/* Select2 */
.select2-container {
	width: 100% !important;
}

[dir="rtl"] .select2-container--bootstrap-5 .select2-selection {
	text-align: right;
}

[dir="rtl"] .select2-container--bootstrap-5 .select2-dropdown {
	direction: rtl;
	text-align: right;
}

[dir="rtl"] .select2-search__field {
	direction: rtl;
}

.select2-container--bootstrap-5 .select2-selection {
	background: var(--surface-2);
	border-color: var(--border);
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
	border-color: var(--honey);
	box-shadow: 0 0 0 0.2rem rgba(var(--honey-rgb), 0.15);
}

.select2-container--bootstrap-5 .select2-results__option--highlighted {
	background: var(--honey) !important;
}

/* select2-bootstrap-5-theme.min.css hardcodes its colors (#212529 text,
   #fff backgrounds) and never looks at --bs-* or --* tokens, so dark mode
   needs its own explicit overrides here — Bootstrap's data-bs-theme can't
   reach a stylesheet that doesn't use its variables. */
body[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection,
body[data-theme="dark"] .select2-selection__rendered,
body[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection__choice {
	color: var(--text) !important;
}

body[data-theme="dark"] .select2-selection__choice {
	background: var(--surface-2);
	border-color: var(--border) !important;
}

body[data-theme="dark"] .select2-selection__placeholder {
	color: var(--text-faint) !important;
}

body[data-theme="dark"] .select2-dropdown {
	color: var(--text);
	background-color: var(--surface);
	border-color: var(--border);
}

body[data-theme="dark"] .select2-dropdown .select2-search__field {
	color: var(--text) !important;
	background-color: var(--surface-2) !important;
	border-color: var(--border) !important;
}

body[data-theme="dark"] .select2-results__option {
	color: var(--text);
}

body[data-theme="dark"] .select2-results__option[aria-disabled="true"] {
	color: var(--text-faint);
}

body[data-theme="dark"] .select2-results__option--highlighted {
	color: #fff !important;
}

/* ==========================================================================
   Print calibration — live position preview
   ========================================================================== */

.calibrator-sheet {
	position: relative;
	width: 100%;
	aspect-ratio: 297 / 210; /* matches the A4-landscape print sheet in prescriptions/print.php */
	background: #fffaf3;
	background-size: cover;
	background-position: center;
	border-radius: 0.4rem;
	border: 1px solid #ebdcc4;
	box-shadow: 0 10px 30px rgba(44, 36, 32, 0.14);
	overflow: hidden;
}

.calibrator-field {
	position: absolute;
	white-space: nowrap;
	font-family: "Dancing Script", "Vazir", cursive;
	font-weight: 700;
	color: #1c1410;
	pointer-events: none;
}

.calibrator-field.is-patient {
	font-size: clamp(1rem, 3vw, 1.5rem);
}

.calibrator-field.is-sub {
	font-size: clamp(0.8rem, 2vw, 1.1rem);
	font-weight: 600;
}

.calibrator-field.is-medicines {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: clamp(0.85rem, 2.2vw, 1.15rem);
}

.calibrator-hint {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.8rem;
	border-radius: var(--radius-md);
	background: var(--sage-soft);
	color: var(--sage-ink);
	font-size: 0.8rem;
	font-weight: 600;
}

/* ==========================================================================
   Auth (login) page
   ========================================================================== */

.auth-body {
	min-height: 100vh;
	display: flex;
	align-items: center;
	background: var(--bg);
	position: relative;
	overflow: hidden;
}

.auth-blob {
	position: absolute;
	border-radius: 50%;
	opacity: 0.55;
	z-index: 0;
}

.auth-blob.one {
	width: 26rem;
	height: 26rem;
	top: -9rem;
	inset-inline-end: -8rem;
	background: var(--honey-soft);
}

.auth-blob.two {
	width: 22rem;
	height: 22rem;
	bottom: -10rem;
	inset-inline-start: -7rem;
	background: var(--sage-soft);
}

.auth-body .container {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   DataTables
   ========================================================================== */

.dt-top-bar,
.dt-bottom-bar {
	width: 100%;
	gap: 0.75rem;
}

.dt-top-bar .dt-buttons {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
}

.dt-top-bar .dt-buttons:empty {
	display: none;
}

[dir="rtl"] .dt-top-bar,
[dir="rtl"] .dt-bottom-bar {
	flex-direction: row-reverse;
}

.dataTables_filter label,
.dataTables_length label {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
}

.dt-top-bar .dataTables_filter,
.dt-bottom-bar .dataTables_length,
.dt-bottom-bar .dataTables_info,
.dt-bottom-bar .dataTables_paginate {
	margin: 0;
}

.dataTables_filter input {
	width: 200px;
	min-width: 150px;
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
	background: var(--surface-2);
	color: var(--text);
	padding: 0.375rem 0.75rem;
	margin: 0;
}

.dataTables_length select {
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
	background: var(--surface-2);
	color: var(--text);
	padding: 0.25rem 0.5rem;
}

[dir="rtl"] .dataTables_filter label,
[dir="rtl"] .dataTables_length label {
	flex-direction: row-reverse;
}

[dir="rtl"] .dt-bottom-bar .ms-auto {
	margin-left: 0 !important;
	margin-right: auto !important;
}

.dataTables_wrapper .dataTables_info {
	padding-top: 0.5rem;
	color: var(--text-muted);
	font-size: 0.875rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
	border-radius: var(--radius-md) !important;
}

.dt-table th.no-export,
.dt-table td.no-export {
	white-space: nowrap;
	min-width: 100px;
}

/* ==========================================================================
   Responsive — mobile-first, no horizontal overflow at 375px.
   ========================================================================== */

@media (max-width: 767.98px) {
	main.container,
	.app-main > main {
		padding-top: 1rem !important;
		padding-bottom: 1rem !important;
	}

	.card-body {
		padding: 1rem;
	}

	.stat-card .display-6 {
		font-size: 1.6rem;
	}

	.d-flex.gap-2,
	.d-flex.gap-3 {
		flex-wrap: wrap;
	}

	.table-responsive {
		border: 1px solid var(--border);
	}

	.text-end {
		text-align: start !important;
	}

	td.text-end,
	th.text-end {
		text-align: start !important;
	}

	.dt-top-bar .dataTables_filter,
	.dt-top-bar .dataTables_filter label {
		width: 100%;
	}

	.dataTables_filter input {
		width: 100%;
		min-width: 0;
	}

	.dt-bottom-bar .ms-auto,
	[dir="rtl"] .dt-bottom-bar .ms-auto {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

@media (max-width: 575.98px) {
	.table > :not(caption) > * > * {
		padding: 0.75rem 0.65rem;
		font-size: 0.94rem;
	}

	.table-actions .btn {
		width: 100%;
	}
}

@media print {
	.no-export {
		display: none !important;
	}
}