:root {
  --primary: #2f8188;
  --primary-color: #2f8188;
  --primary-light: #e8f5f5;
  --btn-primary: #2f8188;
  --border-radius: 8px;
  --font-stack: var(--quincy-font-sans);
}

:root[data-theme="dark"],
:root[data-theme-mode="dark"] {
  --primary: #79cbd0;
  --primary-color: #79cbd0;
  --primary-light: #19373a;
  --btn-primary: #2f8188;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--quincy-font-sans);
  letter-spacing: 0;
}

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

:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--quincy-focus);
  outline-offset: 2px;
}

.navbar,
.desktop-navbar {
  border-color: var(--quincy-line);
  background: var(--quincy-surface);
  box-shadow: none;
}

.navbar .navbar-brand,
.desktop-navbar .navbar-brand {
  min-width: 42px;
  color: var(--quincy-text);
}

.navbar .navbar-brand img.app-logo,
.desktop-navbar img.app-logo {
  width: 42px;
  height: 30px;
  object-fit: contain;
  object-position: left center;
}

.navbar-search-bar input,
.search-bar input,
.awesomplete > input {
  min-height: 38px;
  border-color: var(--quincy-line);
  border-radius: var(--quincy-radius);
  background: var(--quincy-surface-muted);
}

.btn,
.form-control,
.input-with-feedback,
.control-input,
.dropdown-menu,
.modal-content,
.popover,
.list-paging-area,
.page-card,
.widget,
.frappe-card {
  border-radius: var(--quincy-radius);
}

.btn-primary,
.btn-primary-dark,
.btn-primary-light {
  border-color: #2f8188;
  color: #ffffff;
  background: #2f8188;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary-dark:hover,
.btn-primary-light:hover {
  border-color: #256d73;
  color: #ffffff;
  background: #256d73;
}

.desk-page .layout-main-section,
.page-container .layout-main-section,
.form-layout,
.report-wrapper,
.list-row-container {
  border-color: var(--quincy-line);
}

.page-container,
.layout-main,
.layout-main-section-wrapper,
.desk-page {
  background: var(--quincy-canvas);
}

.form-layout,
.report-wrapper,
.frappe-card,
.widget {
  border: 1px solid var(--quincy-line);
  background: var(--quincy-surface);
  box-shadow: var(--quincy-shadow-sm);
}

.page-container .layout-main-section {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.form-section,
.section-body,
.list-row,
.result,
.datatable .dt-row {
  border-color: var(--quincy-line);
}

.list-row-head,
.datatable .dt-header,
.report-summary,
.form-dashboard-section {
  color: var(--quincy-muted);
  background: var(--quincy-surface-muted);
}

.list-row-container {
  border: 0;
  border-bottom: 1px solid var(--quincy-line);
  border-radius: 0;
  background: var(--quincy-surface);
  box-shadow: none;
}

.list-row-container:hover {
  background: var(--quincy-surface-muted);
}

.control-input-wrapper .control-input,
.control-input-wrapper .input-with-feedback,
.form-control {
  min-height: var(--quincy-control-height);
  border-color: var(--quincy-line-strong);
  background: var(--quincy-surface);
}

.page-head,
.page-head .container {
  min-height: 52px;
  background: var(--quincy-surface);
}

.page-title .title-text,
.page-head h3,
.workspace-title {
  color: var(--quincy-text);
  font-weight: 650;
  letter-spacing: 0;
}

.desk-sidebar,
.layout-side-section,
.body-sidebar-container {
  border-color: var(--quincy-line);
  background: var(--quincy-surface-muted);
}

.standard-sidebar-item,
.desk-sidebar-item {
  min-height: 38px;
  border-radius: var(--quincy-radius);
  color: var(--quincy-muted);
}

.standard-sidebar-item.selected,
.standard-sidebar-item:hover,
.desk-sidebar-item.selected,
.desk-sidebar-item:hover {
  color: var(--quincy-brand-readable);
  background: var(--quincy-brand-soft);
}

.desktop-icon,
.desktop-icon .icon-wrapper,
.desktop-icon .app-icon,
.desktop-icon img {
  border-radius: 20px;
}

.desktop-icon .icon-label,
.desktop-icon .app-title {
  color: var(--quincy-text);
  font-weight: 600;
  letter-spacing: 0;
}

.indicator-pill,
.badge,
.tag-pill {
  letter-spacing: 0;
}

.modal-backdrop,
.overlay-modal {
  background: var(--quincy-overlay);
}

.modal-content,
.form-message,
.msgprint-dialog .modal-content {
  border-color: var(--quincy-line);
  background: var(--quincy-surface);
  box-shadow: var(--quincy-shadow);
}

/* Login and password screens use the product, not framework, identity. */
.login-page,
.for-login,
.for-forgot,
.for-signup,
.for-email-login,
.for-update-password {
  background: var(--quincy-canvas);
}

.login-page .page-card,
.for-login .page-card,
.for-forgot .page-card,
.for-signup .page-card,
.for-email-login .page-card,
.for-update-password .page-card {
  width: min(100%, 420px);
  padding: 28px;
  border: 1px solid var(--quincy-line);
  border-radius: var(--quincy-radius);
  background: var(--quincy-surface);
  box-shadow: var(--quincy-shadow);
}

.page-card-head img.app-logo,
.login-page img.app-logo {
  width: min(100%, 224px);
  height: 58px;
  margin: 0 auto 18px;
  object-fit: contain;
}

.page-card-head h4,
.login-content h4 {
  color: var(--quincy-text);
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0;
}

.page-card .form-control {
  min-height: var(--quincy-control-height);
  border-color: var(--quincy-line-strong);
  background: var(--quincy-surface-muted);
}

.page-card .form-control:focus {
  border-color: var(--quincy-brand);
  box-shadow: 0 0 0 3px var(--quincy-focus);
}

.page-card .btn-primary {
  min-height: var(--quincy-control-height);
}

.splash {
  background: var(--quincy-canvas);
}

.splash img {
  width: min(240px, 58vw) !important;
  max-width: 240px !important;
  max-height: 72px;
}

@media (max-width: 576px) {
	.desktop-container > .icons-container > .icons {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		grid-template-rows: auto !important;
		width: 100%;
	}

	.desktop-container > .icons-container > .icons > .desktop-icon {
		width: 100% !important;
		height: 130px !important;
		min-width: 0;
	}

	.desktop-container > .icons-container > .icons > .desktop-icon .icon-caption {
		width: 100%;
		min-height: 36px;
	}

	.desktop-container > .icons-container > .icons > .desktop-icon .icon-title {
		width: 100%;
		height: auto;
		max-height: 36px;
		overflow: hidden;
		line-height: 18px;
		text-align: center;
		text-overflow: clip;
		white-space: normal;
	}

  .login-page .page-card,
  .for-login .page-card,
  .for-forgot .page-card,
  .for-signup .page-card,
  .for-email-login .page-card,
  .for-update-password .page-card {
    width: calc(100% - 24px);
    padding: 22px 18px;
  }

}

@media (max-width: 340px) {
	.desktop-container > .icons-container > .icons {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.desktop-search-wrapper.search-bar {
		flex: 0 0 40px !important;
		width: 40px !important;
		min-width: 40px !important;
	}

	.desktop-navbar-modal-search {
		justify-content: center !important;
		width: 40px !important;
		height: 40px !important;
		padding: 0 !important;
	}

	.desktop-navbar-modal-search .desktop-search-icon {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 20px;
		height: 20px;
		font-size: 0;
		white-space: nowrap;
	}

	.desktop-navbar-modal-search .desktop-keyboard-shortcut {
		display: none !important;
	}
}