/*
 * cms-app.css - additive only. Never edit theme-src; this file only adds
 * the handful of components the SkyDash template doesn't already have
 * (sortable table header affordance, appointment calendar grid, upload
 * drop zone) and otherwise leans on theme-src's existing card/badge/
 * table/form/button classes.
 */
:root{
	--bs-border-radius: 8px;
   --bs-border-radius-sm: 15px;
   --bs-border-radius-lg: 15px;
   --bs-border-radius-xl: 1rem;
   --bs-border-radius-xxl: 2rem;

   --bs-link-color: #4B49AC;

   
}

.list-group{
	--bs-list-group-active-bg: #4B49AC;
   --bs-list-group-active-border-color: #4B49AC;
}



.form-control, .typeahead, .tt-query, .tt-hint, .select2-container--default .select2-selection--single .select2-search__field, 
.select2-container--default .select2-selection--single, .dataTables_wrapper select, .form-select{
	border-radius: 15px;
}


@media (max-width: 768.98px) {
	.content-wrapper {
		padding: 1.5rem 1rem;
	}

	.content-wrapper .card .cms-list-card-body{
		padding: 0;
		background: #f5f7ff;
	}
}



/* theme-src's compiled CSS gives .form-control (text/date/number inputs,
   and select2 - it's explicitly bundled into the same selector group as
   .form-control) 1.125rem vertical padding and a 0.875rem font, but
   .form-select (every plain <select>, e.g. Dentist/Procedure/Payment
   Method/status filters) only gets 0.375rem padding and a 1rem font -
   noticeably shorter than every other field in the same form row. Only
   overriding the properties that drive height, not touching the caret
   icon's right-side padding or anything else .form-select already does.
   Targeting select.form-select specifically (not just .form-select)
   because theme-src has its own higher-specificity `select.form-select`
   rule (padding: 0.4375rem 0.75rem) that otherwise wins regardless of
   stylesheet load order. */
select.form-select {
	padding-top: 1.125rem;
	padding-bottom: 1.125rem;
	padding-left: 1;
	padding-right: 1;
	font-size: 0.875rem;
	line-height: 1;

	color: #1F1F1F;
}

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

.form-control-sm{
	padding: 1rem 1rem;
}



/* Scrollable modals (modal-dialog-scrollable): .modal-body is a flex child
   of .modal-content (flex-direction:column), and flex items default to
   min-height:auto, i.e. never shrink below their own content height. That
   defeats the whole point of "scrollable" - tall content just gets
   silently clipped by .modal-content's overflow:hidden instead of
   producing a scrollbar. min-height:0 lets it actually shrink to the
   available space so overflow-y:auto can do its job. On top of that,
   theme-src's .modal-content only sets max-height:100% (not height), so
   its main size stays "auto" (content-driven) for flex-shrink purposes -
   browsers clip it visually via overflow:hidden but never actually make
   the flex children shrink to fit. Giving it an explicit height:100%
   (definite, since .modal-dialog-scrollable already gives the dialog a
   definite height) fixes that at the source. */
.modal-dialog-scrollable .modal-content {
	height: 100%;
}
.modal-dialog-scrollable .modal-body {
	min-height: 0;
}
/* Every form-based modal in this plugin wraps .modal-header/.modal-body/
   .modal-footer in a <form> so the whole thing submits as one unit - but
   that <form> sits between .modal-content and .modal-body in the DOM,
   and a plain block-level <form> isn't a flex container, so it breaks
   the flex chain .modal-body relies on to know its own bounded height.
   Without this, .modal-body's overflow-y:auto has nothing to scroll
   within and content just gets clipped. Making the form itself a
   shrinkable flex column re-establishes that chain. */
.modal-dialog-scrollable .modal-content > form {
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

/* Sortable table header affordance (cms-table.js) */
.cms-sortable {
	position: relative;
	user-select: none;
}
.cms-sortable:hover {
	color: #3e5569;
}
.cms-sortable::after {
	content: '\2195';
	opacity: .35;
	margin-left: 6px;
	font-size: .85em;
}

/* Portal shell tweaks */
.cms-branch-switcher .dropdown-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
}
.cms-nav-badge {
	margin-left: auto;
}

/* Mobile/tablet bottom tab bar - staff spend most of their time on a
   phone, and reaching up to the sidebar/offcanvas menu for the handful
   of screens used all day (Cash Book, Appointments, Patients, branch
   switch) is worse than a thumb-reachable bar fixed to the bottom, the
   pattern virtually every mobile app uses for its primary destinations.
   Hidden at `lg` and up, where the sidebar is already visible. */
.cms-bottom-nav {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1030;
	background: #fff;
	box-shadow: 0 -2px 10px rgba(20, 25, 40, .08);
	padding: .3rem 0 calc(.3rem + env(safe-area-inset-bottom, 0px));
}
.cms-bottom-nav-item {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: .3rem 0;
	border: none;
	background: none;
	color: #8c98a4;
	font-size: .68rem;
	line-height: 1.2;
	text-decoration: none;
}
.cms-bottom-nav-item i {
	font-size: 1.35rem;
}
.cms-bottom-nav-item.active {
	color: #6c5ce7;
}
@media (max-width: 991.98px) {
	.cms-bottom-nav {
		display: flex;
	}
	.content-wrapper {
		padding-bottom: 4.5rem;
	}
}

/* Appointment calendar (day / week / month) - theme-src has no calendar
   component, so this is a first-party grid styled to match the existing
   card/table look. */


.cms-calendar {
	display: grid;
	grid-template-columns: 70px repeat(var(--cms-cal-cols, 7), 1fr);
	border: 1px solid #e9ecef;
	border-radius: .5rem;
	overflow: hidden;
}
.cms-calendar-head,
.cms-calendar-cell {
	border-bottom: 1px solid #e9ecef;
	border-right: 1px solid #e9ecef;
	padding: .5rem;
	min-height: 46px;
}
.cms-calendar-head {
	background: #f7f9fc;
	font-weight: 600;
	text-align: center;
	font-size: .8rem;
}
.cms-calendar-time {
	font-size: .75rem;
	color: #8c98a4;
	text-align: right;
	padding-right: .5rem;
}
.cms-calendar-slot {
	position: relative;
    cursor: pointer;
    padding: 5px;
    border: solid 1px #efefef;
    min-height: 60px;
    background: #FFF;
}
.cms-calendar-slot:hover {
	background: #f7f9fc;
}
.cms-appt-chip {
	display: block;
	border-radius: .35rem;
	padding: 2px 6px;
	font-size: .72rem;
	margin-bottom: 2px;
	color: #fff;
	line-height: 1.3;
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 479.98px) {
	#cms-appt-view-switch{
		width: 100%;
	}

}



/* Upload drop zone (patient documents/x-rays/photos, expense receipts) */
.cms-dropzone {
	border: 2px dashed #d5dce3;
	border-radius: .5rem;
	padding: 1.5rem;
	text-align: center;
	color: #8c98a4;
	cursor: pointer;
	transition: border-color .15s ease;
}
.cms-dropzone.is-dragover,
.cms-dropzone:hover {
	border-color: #6c5ce7;
	color: #6c5ce7;
}
.cms-dropzone input[type="file"] {
	display: none;
}

/* Login page: highlight server-side error state without new markup */
.cms-field-error {
	color: #fa5c7c;
	font-size: .8rem;
	margin-top: .25rem;
}

/* Compact stat card number, used on staff/admin dashboards */
.cms-stat-value {
	font-size: 1.75rem;
	font-weight: 700;
	margin-bottom: 0;
}

/* Patient Treatment History modal - a compact "date badge" timeline list. */
.cms-th-list {
	display: flex;
	flex-direction: column;
	gap: .75rem;
}
.cms-th-item {
	display: flex;
	gap: 1rem;
	background: #fff;
	border: 1px solid #eef0f4;
	border-radius: .65rem;
	padding: .9rem 1rem;
	box-shadow: 0 1px 3px rgba(20, 25, 40, .04);
}
.cms-th-item-date {
	flex-shrink: 0;
	width: 54px;
	text-align: center;
	background: #f5f3ff;
	border-radius: .5rem;
	padding: .4rem .25rem;
	color: #6c5ce7;
}
.cms-th-item-day {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.1;
}
.cms-th-item-month {
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-weight: 600;
}
.cms-th-item-year {
	font-size: .68rem;
	color: #a3adb8;
}
.cms-th-item-body {
	flex: 1 1 auto;
	min-width: 0;
}
.cms-th-item-procedure {
	font-weight: 700;
	color: #1a2530;
}
.cms-th-item-dentist {
	font-size: .8rem;
	color: #8c98a4;
}
.cms-th-item-amount {
	font-weight: 700;
	color: #1a2530;
	font-size: 1.05rem;
}
.cms-th-item-notes {
	margin-top: .5rem;
	padding-top: .5rem;
	border-top: 1px dashed #eef0f4;
	font-size: .82rem;
	color: #6c7680;
}

/* Treatment Details modal (Treatments page) - modern professional layout. */
.cms-td-header {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #eef0f4;
	margin-bottom: 1rem;
}
.cms-td-avatar {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	font-weight: 700;
	background: #f5f3ff;
	color: #6c5ce7;
}
.cms-td-title-wrap {
	flex: 1 1 auto;
	min-width: 0;
}
.cms-td-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: #1a2530;
	margin-bottom: .15rem;
}
.cms-td-subtitle {
	font-size: .82rem;
	color: #8c98a4;
	line-height: 1.5;
}
.cms-td-right {
	flex-shrink: 0;
	text-align: right;
}
.cms-td-amount {
	font-size: 1.3rem;
	font-weight: 700;
	color: #1a2530;
	white-space: nowrap;
}
.cms-td-status {
	display: inline-block;
	margin-top: .3rem;
	padding: .2rem .6rem;
	border-radius: 999px;
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
}
.cms-td-status-paid {
	background: #e6f7ee;
	color: #1e9e63;
}
.cms-td-status-partial {
	background: #fff4e0;
	color: #d3960a;
}
.cms-td-status-unpaid {
	background: #fdeaea;
	color: #e0452c;
}

.cms-td-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .75rem;
	margin-bottom: 1.25rem;
}
.cms-td-stat {
	background: #f8f9fb;
	border-radius: .6rem;
	padding: .65rem .5rem;
	text-align: center;
}
.cms-td-stat-label {
	font-size: .65rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #8c98a4;
	font-weight: 600;
	margin-bottom: .2rem;
}
.cms-td-stat-value {
	font-size: .98rem;
	font-weight: 700;
	color: #1a2530;
}
.cms-td-stat-balance .cms-td-stat-value {
	color: #e0452c;
}

.cms-td-section-title {
	font-size: .76rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-weight: 700;
	color: #6c7680;
	margin: 1.25rem 0 .6rem;
	display: flex;
	align-items: center;
	gap: .4rem;
}
.cms-td-body > .cms-td-section-title:nth-of-type(1) {
	margin-top: 0;
}

.cms-td-materials {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.cms-td-material {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	background: #fff;
	border: 1px solid #eef0f4;
	border-radius: .5rem;
	padding: .55rem .75rem;
}
.cms-td-material-name {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .86rem;
	color: #1a2530;
}
.cms-td-material-name i {
	color: #6c5ce7;
}
.cms-td-material-qty {
	flex-shrink: 0;
	background: #f5f3ff;
	color: #6c5ce7;
	font-size: .74rem;
	font-weight: 600;
	padding: .2rem .55rem;
	border-radius: 999px;
	white-space: nowrap;
}

.cms-td-payments {
	display: flex;
	flex-direction: column;
	gap: .6rem;
}
.cms-td-payment {
	display: flex;
	align-items: center;
	gap: .75rem;
	background: #fff;
	border: 1px solid #eef0f4;
	border-radius: .6rem;
	padding: .65rem .8rem;
}
.cms-td-payment-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #e6f7ee;
	color: #1e9e63;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
}
.cms-td-payment-body {
	flex: 1 1 auto;
	min-width: 0;
}
.cms-td-payment-method {
	font-weight: 600;
	font-size: .86rem;
	color: #1a2530;
}
.cms-td-payment-ref {
	font-size: .74rem;
	color: #8c98a4;
}
.cms-td-payment-right {
	flex-shrink: 0;
	text-align: right;
}
.cms-td-payment-amount {
	font-weight: 700;
	color: #1e9e63;
	font-size: .9rem;
	white-space: nowrap;
}
.cms-td-payment-date {
	font-size: .7rem;
	color: #a3adb8;
}

.cms-td-empty {
	color: #a3adb8;
	font-size: .85rem;
	font-style: italic;
}
.cms-td-notes {
	background: #f8f9fb;
	border-left: 3px solid #6c5ce7;
	border-radius: .4rem;
	padding: .6rem .8rem;
	font-size: .85rem;
	color: #545e6b;
	margin-top: 1rem;
}

@media (max-width: 420px) {
	.cms-td-stats {
		grid-template-columns: repeat(3, 1fr);
		gap: .4rem;
	}
	.cms-td-stat {
		padding: .5rem .3rem;
	}
	.cms-td-amount {
		font-size: 1.1rem;
	}
}

@media (max-width: 767.98px) {
	.cms-calendar {
		grid-template-columns: 56px repeat(var(--cms-cal-cols, 7), minmax(90px, 1fr));
		overflow-x: auto;
	}
}

/* Appointments "Week" view - a row of 7 day columns. Plain Bootstrap
   .row/.col shrinks each column to an unreadable sliver on phones (and
   wraps the 7th column onto its own full-width row), so this uses a flex
   layout that switches to a horizontally-scrolling strip of fixed-width
   day columns below the tablet breakpoint instead. */
.cms-week-grid {
	display: flex;
	gap: .5rem;
}
.cms-week-day {
	flex: 1 1 0;
	min-width: 0;
	border: 1px solid #e9ecef;
	border-radius: .5rem;
	overflow: hidden;
	background: #FFF;
}
.cms-week-day .cms-calendar-head,
.cms-week-day .cms-calendar-cell {
	border-right: none;
}
.cms-week-day .cms-calendar-cell {
	border-bottom: none;
}
@media (max-width: 767.98px) {
	.cms-week-grid {
		overflow-x: auto;
		padding-bottom: .5rem;
	}
	.cms-week-day {
		flex: 0 0 130px;
	}
}

/* CMSTable mobile/tablet card view (assets/js/cms-table.js). Below `lg`
   the table is swapped for a stack of cards - most staff use this app on
   their phones, and a wide data table forces horizontal scrolling that's
   awkward to use one-handed. */
.cms-cards {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	margin-bottom: 15px;
}
.cms-card {
	background: #fff;
	border: 1px solid #eef0f4;
	border-radius: .75rem;
	box-shadow: 0 2px 6px rgba(20, 25, 40, .06);
	padding: 1rem;
	transition: box-shadow .15s ease;
}
.cms-card-clickable {
	cursor: pointer;
}
.cms-card-clickable:active {
	box-shadow: 0 1px 3px rgba(20, 25, 40, .08);
}
.cms-card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: .75rem;
}
.cms-card-title-wrap {
	min-width: 0;
}
.cms-card-title {
	font-weight: 700;
	font-size: 1rem;
	color: #1a2530;
	overflow-wrap: break-word;
}
.cms-card-subtitle {
	font-size: .8rem;
	color: #8c98a4;
	margin-top: 2px;
}
.cms-card-badge {
	flex-shrink: 0;
	white-space: nowrap;
}
.cms-card-fields {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .6rem .75rem;
	margin-top: .85rem;
	padding-top: .75rem;
	border-top: 1px solid #f0f2f6;
}
.cms-card-field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.cms-card-field-label {
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #a3adb8;
	margin-bottom: 2px;
}
.cms-card-field-value {
	font-size: .875rem;
	color: #3e4b56;
	overflow-wrap: break-word;
}
.cms-card-field-accent {
	font-size: 1.05rem;
	font-weight: 700;
	color: #1a2530;
}
.cms-card-more {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: .6rem .75rem;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .25s ease, opacity .2s ease, margin-top .25s ease;
}
.cms-card-more.is-open {
	max-height: 600px;
	opacity: 1;
	margin-top: .6rem;
}
.cms-card-toggle {
	display: flex;
	align-items: center;
	gap: 4px;
	width: 100%;
	margin-top: .6rem;
	padding: .4rem 0 0;
	border: none;
	border-top: 1px dashed #eef0f4;
	background: none;
	color: #6c5ce7;
	font-size: .8rem;
	font-weight: 600;
}
.cms-card-toggle i {
	transition: transform .2s ease;
}
.cms-card-toggle.is-open i {
	transform: rotate(180deg);
}
.cms-card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: .85rem;
	padding-top: .75rem;
	border-top: 1px solid #f0f2f6;
}
.cms-card-actions .btn {
	flex: 1 1 auto;
}

/* "Rich" card header (assets/js/cms-table.js `_richCardHtml`) - opt-in via
   a table's `card.avatar` config (used by Cash Book): a colored avatar dot,
   title/subtitle, and a prominent right-aligned amount + chevron toggle,
   in place of the classic title/subtitle + badge-chip header. */
.cms-card-rich-header {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
}
.cms-card-avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	flex-shrink: 0;
	background: #eef0f4;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
}
.cms-avatar-income {
	background: #dcf7e9;
	color: #0acf83;
}
.cms-avatar-expense {
	background: #fbe2e5;
	color: #fa5c7c;
}
.cms-card-time {
	font-size: .7rem;
	font-weight: 600;
	color: #8c98a4;
	margin: .1rem 0;
}

/* "Invoice" card layout (Treatments) - avatar/status header, shaded highlight
   box, footer of quick-action icons + a plain "Details" affordance. */
.cms-avatar-blue {
	background: #e3edfb;
	color: #2f6fd6;
}
.cms-card-invoice-header {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
}
.cms-card-invoice .cms-card-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cms-card-status-pill {
	flex-shrink: 0;
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: .25rem .6rem;
	border-radius: 999px;
	white-space: nowrap;
}
.cms-status-paid {
	background: #e6f7ee;
	color: #1e9e63;
}
.cms-status-partial {
	background: #fff4e0;
	color: #d3960a;
}
.cms-status-unpaid {
	background: #fdeaea;
	color: #e0452c;
}
.cms-appt-status-scheduled {
	background: #e8eafd;
	color: #6c5ce7;
}
.cms-appt-status-confirmed {
	background: #e6f7ee;
	color: #1e9e63;
}
.cms-appt-status-arrived {
	background: #e0f7f5;
	color: #0f9c8f;
}
.cms-appt-status-in-progress {
	background: #fff1e2;
	color: #d97a1a;
}
.cms-appt-status-completed {
	background: #e6f0fd;
	color: #2f6fd6;
}
.cms-appt-status-cancelled {
	background: #eef0f4;
	color: #8c98a4;
}
.cms-appt-status-no-show {
	background: #fdeaea;
	color: #e0452c;
}
.cms-card-invoice-highlight {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	background: #f5f6f8;
	border-radius: .65rem;
	padding: .75rem .9rem;
	margin: .85rem 0;
}
.cms-card-invoice-highlight-text {
	flex: 1 1 auto;
	min-width: 0;
}
.cms-card-invoice-highlight-title {
	font-weight: 700;
	color: #1a2530;
	font-size: .92rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cms-card-invoice-highlight-sub {
	font-size: .78rem;
	color: #8c98a4;
	margin-top: .1rem;
}
.cms-card-invoice-highlight-amount {
	flex-shrink: 0;
	font-weight: 700;
	font-size: 1.05rem;
	color: #1a2530;
	white-space: nowrap;
}
.cms-card-invoice-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: .75rem;
	border-top: 1px dashed #eef0f4;
}
.cms-card-invoice-footer-flush {
	margin-top: .85rem;
}
.cms-card-invoice-quick-actions {
	display: flex;
	gap: .5rem;
}
.cms-card-quick-action {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #eef0f4;
	color: #545e6b;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	border: none;
	text-decoration: none;
}
.cms-card-quick-action-disabled {
	opacity: .45;
	pointer-events: none;
}
.cms-card-invoice-details {
	color: #4b3f8f;
	font-weight: 600;
	font-size: .85rem;
	display: flex;
	align-items: center;
	gap: .2rem;
}
.cms-card-rich-title-wrap {
	flex: 1 1 auto;
	min-width: 0;
}
.cms-card-rich-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	flex-shrink: 0;
}
.cms-card-amount {
	font-size: 1.05rem;
	font-weight: 700;
	white-space: nowrap;
}
.cms-amount-income {
	color: #0acf83;
}
.cms-amount-expense {
	color: #fa5c7c;
}
.cms-card-amount-sub {
	font-size: .72rem;
	color: #8c98a4;
	white-space: nowrap;
}
.cms-ledger-list-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: .75rem;
}
.cms-ledger-list-header span:first-child {
	font-size: 1.05rem;
	font-weight: 700;
	color: #1a2530;
}
.cms-ledger-count-badge {
	background: #eef0ff;
	color: #4b3f8f;
	font-size: .78rem;
	font-weight: 700;
	min-width: 24px;
	height: 24px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 .3rem;
}
.cms-card-void-tag {
	display: inline-block;
	font-size: .65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #8c98a4;
	background: #eef0f4;
	border-radius: 999px;
	padding: .05rem .45rem;
	margin-left: .3rem;
	vertical-align: middle;
}
.cms-card-chevron {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-top: 2px;
	border: none;
	border-radius: 50%;
	background: #eef0f4;
	color: #6c5ce7;
	font-size: 1.15rem;
	line-height: 1;
}
.cms-card-chevron:active {
	background: #e4defb;
}
.cms-card-rich .cms-card-more.is-open {
	border-top: 1px dashed #eef0f4;
	padding-top: .6rem;
}

/* Tablet: two-column card grid instead of a single stacked column. */
@media (min-width: 768px) and (max-width: 991.98px) {
	.cms-cards {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}
}





/* Cash Book - large tap-friendly primary action buttons (mobile-first
   per spec; default Bootstrap .btn sizing is desktop-density, not sized
   for one-thumb phone tapping). */
.cms-cb-action-btn {
	min-height: 3.25rem;
	font-size: 1rem;
	font-weight: 600;
}

/* Cash Book - "book not yet opened today" call-to-action banner. */
.cms-cb-not-opened-banner {
	border-left: 4px solid #6c5ce7;
	background: #e0dbfb;
}

/* Cash Book - single consolidated "current cash on hand" summary card,
   replacing the old 4-card row: one prominent balance figure with the
   opening/income/expense breakdown nested inside as a stat strip. */
.cms-cb-balance-card {
	background: linear-gradient(135deg, #4b3f8f 0%, #382d70 100%);
	border-radius: 1rem;
	padding: 1.5rem;
	color: #fff;
}
.cms-cb-balance-label {
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .7rem;
	font-weight: 600;
	color: rgba(255, 255, 255, .65);
	margin-bottom: .35rem;
}
.cms-cb-balance-value {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 1.25rem;
}
.cms-cb-balance-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: .75rem;
	background: rgba(255, 255, 255, .08);
	border-radius: .75rem;
	padding: .85rem .5rem;
}
.cms-cb-balance-stat {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: .2rem;
	color: rgba(255, 255, 255, .75);
}
.cms-cb-balance-stat-label {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: .7rem;
}
.cms-cb-balance-stat-value {
	font-size: 0.9rem;
	font-weight: 700;
	color: #fff;
}
.cms-cb-balance-stat-income .cms-cb-balance-stat-label,
.cms-cb-balance-stat-income .cms-cb-balance-stat-value {
	color: #4ee8a7;
}
.cms-cb-balance-stat-expense .cms-cb-balance-stat-label,
.cms-cb-balance-stat-expense .cms-cb-balance-stat-value {
	color: #ff8a9b;
}

#cash-book-page .cms-card-fields{
	grid-template-columns: repeat(3, 1fr);
}

/* Daily Ledger - mobile-only summary (purple balance card + cash in/out cards). */
.cms-ledger-trend {
	display: flex;
	align-items: center;
	gap: .3rem;
	font-size: .8rem;
	font-weight: 600;
	color: #4ee8a7;
	margin-bottom: 0;
}
.cms-ledger-trend.cms-ledger-trend-down {
	color: #ff8a9b;
}
.cms-ledger-flow-card {
	display: flex;
	align-items: center;
	gap: .65rem;
	background: #fff;
	border: 1px solid #eef0f4;
	border-radius: .75rem;
	padding: .75rem;
	height: 100%;
	box-shadow: 0 1px 3px rgba(20, 25, 40, .04);
}
.cms-ledger-flow-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.15rem;
}
.cms-ledger-flow-icon-in {
	background: #e6f7ee;
	color: #1e9e63;
}
.cms-ledger-flow-icon-out {
	background: #fdeaea;
	color: #e0452c;
}
.cms-ledger-flow-body {
	min-width: 0;
}
.cms-ledger-flow-label {
	font-size: .72rem;
	color: #8c98a4;
	margin-bottom: .1rem;
	white-space: nowrap;
}
.cms-ledger-flow-value {
	font-size: .95rem;
	font-weight: 700;
	margin-bottom: 0;
}
.cms-ledger-flow-value-in {
	color: #1e9e63;
}
.cms-ledger-flow-value-out {
	color: #e0452c;
}

@media (max-width: 480.98px) {
	.cms-cb-action-btn{
		min-height: 2.25rem;
	}


}



/* Print view (Daily Ledger "Print" button) - hide chrome, keep only the
   report card content. */
@media print {
	.navbar, .sidebar, .footer, .btn, #cms-toast-container,
	.cms-table-search-group, .cms-table-pagination, .modal, .cms-cards,
	.cms-bottom-nav {
		display: none !important;
	}
	.main-panel, .content-wrapper {
		margin: 0 !important;
		padding: 0 !important;
	}
	.table-responsive {
		display: block !important;
	}
	.card {
		border: none !important;
		box-shadow: none !important;
	}
}



/* pagination */

.page-link.active, .active > .page-link{
	background-color: #4B49AC;
   border-color: #4B49AC;
}

.pagination,
.pagination-sm{
	border-radius: 15px;
	--bs-pagination-border-radius: 15px;
}