/* =========================================
   RESPONSIVE CONTENT FIXES
   AppStack/Bootstrap keeps sidebar and navbar behavior.
========================================= */

:root {
	--responsive-page-max: 1680px;
	--responsive-page-gutter: clamp(1rem, 2vw, 2rem);
}

body {
	min-width: 320px;
	overflow-x: hidden;
}

img,
canvas,
video,
iframe {
	max-width: 100%;
}

.content {
	padding: var(--responsive-page-gutter);
}

.content > .container-fluid,
.content > .container,
main.content > .container-fluid,
main.content > .container {
	max-width: var(--responsive-page-max);
}

.card,
.card-body,
.modal-content,
.tab-content,
.tab-pane,
.accordion-body,
.list-group-item,
.form-control,
.form-select,
.input-group,
.form-floating,
.select2-container {
	min-width: 0;
	max-width: 100%;
}

.card-header,
.card-body,
.card-footer {
	word-wrap: break-word;
}

.table-responsive,
.ui-table-wrap,
.upcoming-table-wrap {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.table-responsive > .table,
.ui-table,
.upcoming-payments-table {
	min-width: 720px;
}

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

.table td,
.table th,
.ui-cell-title,
.ui-cell-sub,
.ui-cell-value,
.ui-reason-text {
	overflow-wrap: anywhere;
}

.modal-dialog {
	max-width: min(96vw, var(--bs-modal-width));
}

.modal-xl,
.modal-xxl,
.client-process-flow-modal .modal-dialog {
	max-width: min(1560px, 96vw) !important;
}

.form-floating > label,
.form-label,
.col-form-label {
	overflow-wrap: anywhere;
}

.recalc-kpi-head,
.recalc-month-badges,
.upcoming-toolbar,
.upcoming-month-summary-pills,
.upcoming-month-jump-row,
.upcoming-status-stack,
.case-guidance-meta,
.registration-hero-actions {
	min-width: 0;
}

.recalc-kpi-card-success,
.recalc-kpi-card-warning,
.recalc-kpi-card-danger,
.recalc-kpi-card-neutral,
.insight-kpi-card,
.insight-soft-box,
.insight-alert-card,
.registration-feature-card,
.registration-usecase-card,
.registration-price-card {
	height: 100%;
}

.process-designer-shell,
.visual-designer-shell,
.cmmn-designer-shell,
.bpmn-designer-shell,
.designer-canvas,
.diagram-canvas,
.modeler-canvas,
#canvas,
#diagramCanvas,
#bpmnCanvas,
#cmmnCanvas {
	max-width: 100%;
	min-width: 0;
	overflow: auto;
}

.process-designer-shell,
.visual-designer-shell,
.cmmn-designer-shell,
.bpmn-designer-shell {
	min-height: min(72vh, 860px);
}

.fin-admin-login-layout,
.fin-admin-login-card,
.fin-admin-overlay-card {
	min-width: 0;
	max-width: 100%;
}

@media (min-width: 1440px) {
	.content {
		padding-left: clamp(1.5rem, 2.6vw, 3rem);
		padding-right: clamp(1.5rem, 2.6vw, 3rem);
	}

	.row {
		--bs-gutter-x: 1.75rem;
	}

	.card-body {
		padding: 1.35rem;
	}
}

@media (min-width: 1800px) {
	:root {
		--responsive-page-max: 1760px;
	}

	.content {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
}

@media (max-width: 1199.98px) {
	.content {
		padding: 1.25rem;
	}

	.card-header.d-flex,
	.card-body.d-flex,
	.page-header,
	.recalc-kpi-head {
		gap: 0.75rem;
	}
}

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

	.fin-admin-login-layout {
		grid-template-columns: 1fr !important;
	}

	.fin-admin-login-hero {
		min-height: 300px;
		padding: 2rem !important;
	}

	.fin-admin-overlay-card,
	.fin-admin-login-card {
		border-radius: 1rem !important;
	}

	.fin-admin-overlay-card {
		padding: 1.5rem !important;
	}

	.fin-admin-overlay-card h1 {
		font-size: clamp(2rem, 7vw, 2.75rem) !important;
	}

	.fin-admin-login-form-wrap {
		padding: 1.25rem !important;
	}

	.fin-admin-login-card {
		padding: 1.75rem !important;
	}
}

@media (max-width: 767.98px) {
	.content {
		padding: 0.85rem;
	}

	.container,
	.container-fluid {
		--bs-gutter-x: 1.25rem;
	}

	.row {
		--bs-gutter-x: 1rem;
		--bs-gutter-y: 1rem;
	}

	.card {
		border-radius: 0.5rem;
	}

	.card-header,
	.card-body,
	.card-footer {
		padding: 1rem;
	}

	.card-header.d-flex,
	.card-body.d-flex,
	.card-footer.d-flex,
	.page-header,
	.recalc-kpi-head,
	.upcoming-toolbar,
	.registration-hero-actions,
	.btn-toolbar {
		align-items: stretch !important;
		flex-direction: column !important;
	}

	.card-header .btn,
	.card-body .btn,
	.card-footer .btn,
	.page-header .btn,
	.upcoming-toolbar .btn,
	.registration-hero-actions .btn,
	.btn-toolbar .btn {
		width: 100%;
	}

	.btn-group {
		display: flex;
		width: 100%;
	}

	.btn-group > .btn {
		flex: 1 1 0;
		min-width: 0;
	}

	.input-group {
		flex-wrap: wrap;
	}

	.input-group > .form-control,
	.input-group > .form-select {
		min-width: 0;
	}

	.table-responsive > .table,
	.ui-table,
	.upcoming-payments-table {
		min-width: 640px;
	}

	.recalc-month-badge,
	.upcoming-filter-chip,
	.upcoming-month-jump,
	.upcoming-month-pill,
	.ui-status-badge {
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	.modal-dialog {
		margin: 0.75rem auto;
	}

	.modal-content {
		border-radius: 0.65rem;
	}

	.process-designer-shell,
	.visual-designer-shell,
	.cmmn-designer-shell,
	.bpmn-designer-shell {
		min-height: 64vh;
	}
}

@media (max-width: 575.98px) {
	.content {
		padding: 0.75rem;
	}

	.card-header,
	.card-body,
	.card-footer {
		padding: 0.85rem;
	}

	.h1,
	h1 {
		font-size: 1.45rem;
	}

	.h2,
	h2 {
		font-size: 1.25rem;
	}

	.h3,
	h3 {
		font-size: 1.1rem;
	}

	.badge,
	.btn,
	.dropdown-item {
		overflow-wrap: anywhere;
	}

	.fin-admin-login-hero {
		display: none !important;
	}

	.fin-admin-login-body,
	.fin-admin-login-layout {
		min-height: 100dvh;
	}

	.fin-admin-login-card {
		padding: 1.25rem !important;
	}
}