/* Camada responsiva global para o legado DenteSys.
   Mantem os fluxos existentes e adapta tabelas/formularios sem alterar PHP. */

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

html {
	width: 100%;
	min-width: 0;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
}

body {
	width: 100%;
	min-width: 0;
	overflow-x: hidden;
}

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

img,
video {
	height: auto;
}

fieldset,
form,
.conteudo,
.panel,
.panel-body,
.modal-content,
.well,
.tab-content,
#conteudo,
#painel {
	max-width: 100%;
	min-width: 0;
}

#conteudo,
#painel {
	overflow-wrap: anywhere;
}

.panel-body,
.table-responsive,
.modal-body,
.conteudo {
	-webkit-overflow-scrolling: touch;
}

table {
	max-width: 100%;
}

table[width] {
	width: 100% !important;
}

td[width],
th[width] {
	max-width: 100%;
}

input,
select,
textarea,
button,
.btn,
.form-control,
.input-group,
.bootstrap-select {
	max-width: 100%;
}

input[size],
textarea[cols],
select.form-control,
input.form-control,
textarea.form-control {
	width: 100% !important;
}

textarea {
	min-height: 92px;
	resize: vertical;
}

.input-group {
	width: 100%;
}

.btn {
	white-space: normal;
}

.table-actions,
.form-actions,
.modal-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.table-actions > .btn,
.form-actions > .btn,
.modal-footer > .btn {
	margin: 0;
}

.dropdown-menu,
.ui-datepicker,
.popover {
	max-width: calc(100vw - 24px);
}

.pesqProcedimento,
.search,
.search_suggest {
	max-width: calc(100vw - 32px) !important;
	overflow-x: auto;
	z-index: 5200;
}

.modal {
	padding-left: 12px !important;
	padding-right: 12px !important;
}

.modal-dialog {
	max-width: calc(100vw - 24px);
	margin-left: auto;
	margin-right: auto;
}

.modal-body {
	overflow-x: auto;
}

.login-page #centro {
	max-width: 100vw !important;
	overflow-x: hidden !important;
}

.login-page #container {
	box-sizing: border-box;
	max-width: calc(100vw - 24px) !important;
	max-width: min(440px, calc(100vw - 24px)) !important;
}

.login-page .login-heading p {
	max-width: 100%;
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
}

.login-page .input-group,
.login-page .form-control,
.login-page #btLogin {
	max-width: 100%;
}

@media (min-width: 768px) and (max-width: 1199px) {
	:root {
		--sidebar-width: 220px;
	}

	#conteudo {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	.panel-body {
		padding: 16px !important;
	}

	.dashboard-kpis {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	.dashboard-grid,
	.platform-kpis {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 991px) {
	.app-topbar {
		gap: 10px;
	}

	.app-topbar__context,
	.app-topbar__profile,
	.app-topbar__user {
		min-width: 0;
	}

	.app-topbar__context strong,
	.app-topbar__context span,
	.app-topbar__user strong,
	.app-topbar__user small {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.platform-header,
	.dashboard-header,
	.agenda-toolbar .panel-body {
		align-items: stretch !important;
		flex-direction: column !important;
	}

	.agenda-filters {
		grid-template-columns: 1fr !important;
		width: 100%;
	}

	.agenda-filters label,
	.agenda-filters select,
	.agenda-filters .btn {
		grid-column: auto !important;
		width: 100%;
	}
}

@media (max-width: 767px) {
	body {
		font-size: 14px;
	}

	.app-topbar {
		position: fixed;
		height: var(--topbar-height, 72px);
		padding: 0 10px !important;
	}

	.app-topbar__left,
	.app-topbar__right {
		min-width: 0;
	}

	.app-topbar__left {
		flex: 1 1 auto;
	}

	.app-topbar__right {
		flex: 0 1 auto;
	}

	.app-topbar__context strong {
		font-size: 14px;
	}

	.app-topbar__context span,
	.app-topbar__user small {
		font-size: 11px;
	}

	.app-topbar__profile {
		gap: 8px;
	}

	.app-topbar__avatar {
		width: 36px !important;
		height: 36px !important;
		flex: 0 0 36px !important;
	}

	.app-topbar__user {
		max-width: 34vw !important;
	}

	.sidebar-toggle,
	.theme-toggle {
		flex: 0 0 38px;
		width: 38px !important;
		height: 38px !important;
	}

	.nav-side-menu {
		position: fixed !important;
		top: var(--topbar-height, 72px) !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		height: auto !important;
		max-height: calc(100vh - var(--topbar-height, 72px)) !important;
		margin: 0 !important;
		overflow-y: auto !important;
		border-right: 0 !important;
	}

	.nav-side-menu .brand {
		min-height: 54px !important;
		padding: 10px 56px 10px 14px !important;
	}

	.nav-side-menu .brand-copy {
		max-width: calc(100vw - 96px);
	}

	.nav-side-menu .brand-copy strong,
	.nav-side-menu .brand-copy small {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.nav-side-menu .toggle-btn {
		display: block !important;
	}

	html[data-theme="dark"] .nav-side-menu .toggle-btn {
		color: #e0f7ff !important;
		background: #0f172a !important;
		border: 1px solid #3b82f6 !important;
		box-shadow: 0 0 0 2px rgba(44, 183, 242, .18), 0 8px 18px rgba(0, 0, 0, .28) !important;
		text-shadow: none !important;
	}

	html[data-theme="dark"] .nav-side-menu .toggle-btn:hover,
	html[data-theme="dark"] .nav-side-menu .toggle-btn:focus {
		color: #ffffff !important;
		background: #1e293b !important;
		border-color: #2cb7f2 !important;
		outline: 0 !important;
	}

	.nav-side-menu .menu-list,
	.nav-side-menu #menu {
		display: block !important;
	}

	.nav-side-menu .menu-content.collapse {
		display: none !important;
	}

	.nav-side-menu .menu-content.collapse.in {
		display: block !important;
	}

	.nav-side-menu li a,
	.nav-side-menu .sub-menu li {
		min-height: 44px !important;
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}

	body.sidebar-collapsed .nav-side-menu {
		width: 100% !important;
	}

	body.sidebar-collapsed #conteudo,
	#conteudo {
		width: 100% !important;
		margin-left: 0 !important;
		margin-top: calc(var(--topbar-height, 72px) + 58px) !important;
		padding: 12px !important;
	}

	#conteudo > .panel,
	#conteudo > .conteudo,
	#painel > .panel,
	#painel > .conteudo {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.panel {
		margin-bottom: 12px !important;
	}

	.panel-heading {
		min-height: 42px !important;
		padding: 11px 12px !important;
		line-height: 1.35 !important;
	}

	.panel-body {
		padding: 12px !important;
		overflow-x: auto;
	}

	legend,
	h1,
	h2,
	h3,
	h4 {
		word-break: normal;
		overflow-wrap: anywhere;
	}

	legend {
		font-size: 20px;
	}

	h1 {
		font-size: 24px;
	}

	h2 {
		font-size: 21px;
	}

	h3,
	h4 {
		font-size: 18px;
	}

	.row {
		margin-left: -8px;
		margin-right: -8px;
	}

	[class*="col-sm-"],
	[class*="col-md-"],
	[class*="col-lg-"] {
		width: 100% !important;
		float: none !important;
		padding-left: 8px;
		padding-right: 8px;
	}

	.form-control,
	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="number"],
	input[type="date"],
	input[type="time"],
	input[type="tel"],
	select,
	textarea {
		min-height: 42px;
		font-size: 16px !important;
	}

	label {
		display: block;
		margin-bottom: 6px;
	}

	.input-group-addon {
		white-space: nowrap;
	}

	.btn,
	button.btn,
	input[type="button"],
	input[type="submit"] {
		min-height: 42px;
	}

	.btn-group,
	.btn-toolbar {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}

	.btn-group > .btn,
	.btn-toolbar > .btn {
		margin: 0;
	}

	.panel-body > .table,
	.conteudo > .table,
	form > .table,
	fieldset > .table {
		width: 100% !important;
	}

	#conteudo table.table:has(.form-control):not(.table-hover):not(.table-bordered),
	#conteudo table.table:has(input):not(.table-hover):not(.table-bordered),
	#conteudo table.table:has(select):not(.table-hover):not(.table-bordered),
	#conteudo table.table:has(textarea):not(.table-hover):not(.table-bordered) {
		display: block;
		min-width: 0 !important;
		background: transparent;
	}

	#conteudo table.table:has(.form-control):not(.table-hover):not(.table-bordered) > tbody,
	#conteudo table.table:has(input):not(.table-hover):not(.table-bordered) > tbody,
	#conteudo table.table:has(select):not(.table-hover):not(.table-bordered) > tbody,
	#conteudo table.table:has(textarea):not(.table-hover):not(.table-bordered) > tbody,
	#conteudo table.table:has(.form-control):not(.table-hover):not(.table-bordered) > tbody > tr,
	#conteudo table.table:has(input):not(.table-hover):not(.table-bordered) > tbody > tr,
	#conteudo table.table:has(select):not(.table-hover):not(.table-bordered) > tbody > tr,
	#conteudo table.table:has(textarea):not(.table-hover):not(.table-bordered) > tbody > tr {
		display: block;
		width: 100% !important;
	}

	#conteudo table.table:has(.form-control):not(.table-hover):not(.table-bordered) > tbody > tr > td,
	#conteudo table.table:has(input):not(.table-hover):not(.table-bordered) > tbody > tr > td,
	#conteudo table.table:has(select):not(.table-hover):not(.table-bordered) > tbody > tr > td,
	#conteudo table.table:has(textarea):not(.table-hover):not(.table-bordered) > tbody > tr > td {
		display: block;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		padding: 8px 0 !important;
	}

	#conteudo table.table:has(thead),
	#conteudo table.table.table-hover,
	#conteudo table.table.table-bordered,
	#conteudo .table-responsive > table {
		min-width: 680px;
	}

	#conteudo .panel-body > table.table:has(thead),
	#conteudo .panel-body > table.table.table-hover,
	#conteudo .panel-body > table.table.table-bordered {
		margin-bottom: 0 !important;
	}

	.table-actions,
	td[align="right"],
	th[align="right"],
	div[align="center"],
	div[align="right"] {
		text-align: left !important;
	}

	.table-actions {
		justify-content: flex-start;
	}

	.nav-tabs,
	.nav-pills {
		display: flex;
		flex-wrap: nowrap;
		gap: 6px;
		overflow-x: auto;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
	}

	.nav-tabs > li,
	.nav-pills > li {
		float: none;
		flex: 0 0 auto;
	}

	.nav-tabs > li > a,
	.nav-pills > li > a {
		white-space: nowrap;
	}

	.dashboard-kpis,
	.dashboard-grid,
	.platform-kpis {
		grid-template-columns: 1fr !important;
	}

	.chart-card-wide,
	.upcoming-card {
		grid-column: auto !important;
	}

	.agenda-fullcalendar {
		min-height: 520px;
		overflow-x: auto;
	}

	.fc {
		min-width: 720px;
	}

	.sweet-alert,
	.swal-modal {
		width: calc(100vw - 28px) !important;
		max-width: 520px !important;
		margin-left: 0 !important;
	}

	.login-page #centro {
		left: 0 !important;
		width: 100% !important;
		max-width: 100vw !important;
		height: 100dvh !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 16px !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
	}

	.login-page #centro > tbody,
	.login-page #centro > tbody > tr,
	.login-page #centro > tbody > tr > td {
		display: block !important;
		width: calc(100vw - 24px) !important;
		max-width: 440px !important;
	}

	.login-page #container {
		width: calc(100vw - 48px) !important;
		max-width: 440px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding: 26px 22px !important;
	}

	.login-heading p {
		white-space: normal !important;
		overflow: visible !important;
		text-overflow: clip !important;
	}

	.login-page .input-group {
		display: flex !important;
		align-items: stretch;
		width: 100% !important;
	}

	.login-page .input-group-addon {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		flex: 0 0 40px;
		width: 40px !important;
		min-width: 40px;
	}

	.login-page .input-group .form-control {
		display: block !important;
		flex: 1 1 auto;
		width: auto !important;
		min-width: 0;
	}
}

@media (max-width: 480px) {
	.app-topbar__user {
		display: none;
	}

	.app-topbar__context {
		max-width: calc(100vw - 150px);
	}

	#conteudo {
		padding: 10px !important;
	}

	.panel-body {
		padding: 10px !important;
	}

	.btn,
	button.btn {
		width: 100%;
		justify-content: center;
	}

	.btn-icon,
	.table-actions .btn-icon {
		width: 42px !important;
		flex: 0 0 42px;
	}

	.table-actions .btn-icon {
		min-height: 42px;
	}

	.table-actions {
		gap: 8px;
	}

	.modal {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	.modal-dialog {
		max-width: calc(100vw - 16px);
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.login-page #centro {
		padding: 10px !important;
	}

	.login-page #container {
		width: calc(100vw - 24px) !important;
		padding: 22px 18px !important;
	}
}

@media print {
	html,
	body {
		overflow: visible !important;
	}

	#conteudo,
	.panel-body,
	.conteudo {
		overflow: visible !important;
	}
}