/* ============================================================
   theme.css
   Shared design tokens & base typography for the whole app.
   Loaded on every page (auth pages and the dashboard shell).
   Palette aligned with the Nexxarra public site (linen / moss / clay / sage).
   ============================================================ */

:root{
  --primary:#2D3B2E;--primary-dark:#1B2419;--primary-light:#E2E7DE;
  --accent:#C76B4A;--accent2:#E08562;--platform:#6d28d9;--platform-light:#f3eafe;
  --tenant:#7C9070;--tenant-light:#E7EEE2;
  --success:#7C9070;--warning:#f59e0b;--danger:#ef4444;--info:#3b82f6;
  --sidebar-w:264px;--header-h:42px;
  --bg:#F6F2EC;--card-bg:#ffffff;--text:#1F2420;--muted:#83786A;
  --border:rgba(31,36,32,0.12);--radius:14px;--shadow:0 16px 40px -16px rgba(31,36,32,0.18);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:'DM Sans',sans-serif;color:var(--text);font-size:15.5px;background:var(--bg);}
h1,h2,h3,h4,h5,h6,.brand-title,.page-title{font-family:'Fraunces',serif;font-weight:500;letter-spacing:-0.01em;}

.text-xs{font-size:12.5px;}
.section-gap{margin-bottom:24px;}

/* generic form look shared by auth + dashboard forms */
.form-label{font-size:13px;font-weight:600;margin-bottom:5px;color:var(--text);}
.form-control,.form-select{font-size:14.5px;border-color:var(--border);border-radius:9px;}
.form-control:focus,.form-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(199,107,74,.15);}

.btn-primary{background:var(--primary);border-color:var(--primary);}
.btn-primary:hover{background:var(--accent);border-color:var(--accent);}
.btn-outline-primary{color:var(--primary);border-color:var(--primary);}
.btn-outline-primary:hover{background:var(--primary);}


.alert-app {
	font-size: 12.5px;
	border-radius: 8px;
}

/* Small action buttons */
.btn-xs-custom {
	font-size: 11px;
	padding: 2px 8px;
}

.btn-xxs-custom {
	font-size: 10px;
	padding: 1px 6px;
}

.btn-xxs-alt {
	font-size: 10px;
	padding: 2px 7px;
}

.btn-action {
	font-size: 11px;
	padding: 2px 8px;
}

.btn-action-sm {
	font-size: 10px;
	padding: 2px 7px;
}

.btn-action-xs {
	font-size: 10px;
	padding: 1px 6px;
}

/* Card-level small action button — same sizing as btn-action, used
   alongside Bootstrap's own btn-xs (e.g. Teleprompter's mic/refresh
   buttons) rather than duplicating font-size/padding inline each time. */
.btn-card-action {
	font-size: 11px;
	padding: 2px 8px;
}

/* Badge utilities */
.badge-xs {
	font-size: 9px;
}

.badge-sm {
	font-size: 10px;
}

.badge-md {
	font-size: 11px;
}

/* Width utilities */
.w-16px {
	width: 16px;
}
.w-90px {
	width: 90px;
}
.w-100px { width: 100px; }
.w-110px { width: 110px; }
.w-120px { width: 120px; }
.w-130px { width: 130px; }
.w-140px { width: 140px; }
.w-150px { width: 150px; }
.w-160px { width: 160px; }
.w-180px { width: 180px; }
.w-200px { width: 200px; }
.w-220px { width: 220px; }
.w-260px { width: 260px; }
.w-36px{width:36px;}
.w-80px{width:80px;}
.w-100px{width:100px;}
.w-110px{width:110px;}
.w-120px{width:120px;}
.w-200px{width:200px;}
.w-280px{max-width:280px;}
.w-740px{max-width:740px;}

.max-w-200px { max-width: 200px; }
.max-w-260px { max-width: 260px; }
/* Alias of w-280px (max-width:280px) under the max-w-* naming pattern —
   added rather than rewriting the one caller already using this name. */
.max-w-280px { max-width: 280px; }

.mb-6 {
	margin-bottom: 6px;
}

.mb-30 {
	margin-bottom: 30px;
}

.mt-6 {
	margin-top: 6px;
}

.w-auto-fit { width: auto; }

/* Filter/search control sizing — used across every tab's toolbar (Encounters,
   History, Documents, Lab Results, Prescriptions) so a filter dropdown and a
   search box are consistently sized wherever they appear, rather than each
   tab picking its own width. */
.select-filter-sm { width: 150px; }
.input-search-md { width: 200px; }

/* Wrapper for a card header's filter/search controls (typically paired with
   d-flex gap-2 ms-auto align-items-center) — allows controls to wrap onto a
   second line on narrow viewports instead of overflowing the header. */
.card-header-controls {
	flex-wrap: wrap;
	row-gap: 6px;
}

/* Border utilities */
.border-theme {
	border: 1px solid var(--border);
}

.border-top-theme {
	border-top: 1px solid var(--border);
}

.border-bottom-theme {
	border-bottom: 1px solid var(--border);
}

.border-dashed-theme {
	border: 2px dashed var(--border);
}

.rounded-theme {
	border-radius: 8px;
}

.rounded-theme-lg {
	border-radius: 14px;
}

/* Object fit */
.object-cover {
	object-fit: cover;
}

/* Cursors */
.cursor-pointer {
	cursor: pointer;
}

.cursor-crosshair {
	cursor: crosshair;
}

/* White space */
.text-nowrap-force {
	white-space: nowrap;
}

/* Touch */
.touch-none {
	touch-action: none;
}

/* Fixed heights */
.h-140px {
	height: 140px;
}

.max-h-120px {
	max-height: 120px;
}

.max-h-160px {
	max-height: 160px;
}

/* Typography */
.text-9 {
	font-size: 9px;
}

.text-10 {
	font-size: 10px;
}

.text-11 {
	font-size: 11px;
}

.text-12 {
	font-size: 12px;
}

.text-125 {
	font-size: 12.5px;
}

.text-13 {
	font-size: 13px;
}

.text-135 {
	font-size: 13.5px;
}

.text-145 {
	font-size: 14.5px;
}

.text-16 {
	font-size: 16px;
}

.field-label {
	font-size: 12.5px;
	font-weight: 600;
}

.field-value {
	font-size: 13px;
}

.section-title {
	font-size: 16px;
	font-weight: 600;
}

.helper-text {
	font-size: 11px;
	color: var(--muted);
}

.caption {
	font-size: 9px;
}

.meta-text {
	font-size: 12px;
	color: var(--muted);
}

.pre-wrap-break {
	white-space: pre-wrap;
	word-break: break-word;
}

.text-truncate-220 {
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cursor-pointer {
	cursor: pointer;
}

.avatar-38 {
	width: 38px;
	height: 38px;
}

.bg-theme {
	background: var(--bg);
}

.queue-search-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 10;
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	max-height: 320px;
	overflow: auto;
}

/* Global modal scroll fix — applies the same behavior as Bootstrap's
   .modal-dialog-scrollable class to EVERY modal by default, not just ones
   that remember to add that class explicitly. Without this, a modal taller
   than the viewport just gets cut off at the bottom with no way to reach
   the rest of its content or the footer buttons.
   Header and footer stay fixed in place; only the body scrolls internally.
 
   !important is deliberate here, not sloppy — confirmed against the actual
   Bootstrap _modal.scss source: .modal-dialog-scrollable .modal-content sets
   max-height/overflow with TWO classes (specificity 0,0,2,0), which beats a
   plain .modal-content rule (0,0,1,0) regardless of which CSS file loads
   last. Without !important, any modal that already has the
   modal-dialog-scrollable class silently ignores this override entirely. */
.modal-content {
	max-height: calc(100vh - 3.5rem) !important; /* matches Bootstrap's default 1.75rem top+bottom modal margin */
	display: flex !important;
	flex-direction: column !important;
	overflow: scroll !important;
	overflow-x: hidden !important;
}

.modal-header,
.modal-footer {
	flex-shrink: 0 !important;
}

.modal-body {
	overflow-y: auto !important;
}